muayjtp/web_next
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

made change on menu item page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-19 19:11:17 -05:00
parent ab72a322ef
commit 1e50788064
3 changed files with 45 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
donutshop_ecommerce/src/app/menu-items/edit/[id]/page.js
View file

@ -4,33 +4,28 @@ import useProfile from '../../../../components/UseProfile';
import { redirect, useParams } from 'next/navigation'
import Link from 'next/link'
import UserTab from '../../../../components/layout/UserTab';
import EditImage from '../../../../components/layout/EditImage';
import MenuItemForm from '../../../../components/layout/MenuItemForm';
import toast from 'react-hot-toast';
const EditMenuItemPage = () => {
const {loading, data} = useProfile();
const [menuImg, setMenuImg] = useState('');
const [itemName, setItemName] = useState('');
const [description, setDescription] = useState('');
const [basePrice, setBasePrice] = useState('');
const [goToItems, setGoToItems] = useState(false);
const [menuItem, setMenuItem] = useState(null);
const {id} = useParams();
useEffect(() => {
fetch('/api/menu-items').then(res => {
res.json().then(items => {
const item = items.find(i => i._id === id);
setMenuImg(item.menuImg);
setItemName(item.itemName);
setDescription(item.description);
setBasePrice(item.basePrice);
setMenuItem(item);
})
})
}, [])
async function handleMenuFormSubmit(ev){
async function handleMenuFormSubmit(ev, data){
ev.preventDefault();
const data = {menuImg, itemName, description, basePrice, _id:id};
data = {...data, _id:id};
const menuSavingPromise = new Promise(async (resolve, reject) => {
const response = await fetch('/api/menu-items', {
method: 'PUT',
@ -67,24 +62,7 @@ const EditMenuItemPage = () => {
<div className='mb-10'>
<UserTab isAdmin={true}/>
<div className='px-5 max-w-md mx-auto mt-10'>
<form className='mt-10' onSubmit={handleMenuFormSubmit}>
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
<EditImage link={menuImg} setLink={setMenuImg}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
<input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
<input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
<input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
</div>
<button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
</form>
<MenuItemForm menuItem={menuItem} handleMenuFormSubmit={handleMenuFormSubmit}/>
<div className='max-w-md mx-auto mt-2'>
<Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>Show all menu items</Link>
</div>

27
donutshop_ecommerce/src/app/menu-items/new/page.js
View file

@ -6,18 +6,14 @@ import toast from 'react-hot-toast'
import useProfile from '../../../components/UseProfile'
import Link from 'next/link'
import { redirect } from 'next/navigation'
import MenuItemForm from '../../../components/layout/MenuItemForm'
const NewMenuItemPage = () => {
const {loading, data} = useProfile();
const [menuImg, setMenuImg] = useState('');
const [itemName, setItemName] = useState('');
const [description, setDescription] = useState('');
const [basePrice, setBasePrice] = useState('');
const [goToItems, setGoToItems] = useState(false)
async function handleMenuFormSubmit(ev){
async function handleMenuFormSubmit(ev, data){
ev.preventDefault();
const data = {menuImg, itemName, description, basePrice,};
const menuSavingPromise = new Promise(async (resolve, reject) => {
const response = await fetch('/api/menu-items', {
method: 'POST',
@ -54,24 +50,7 @@ const NewMenuItemPage = () => {
<div className='mb-10'>
<UserTab isAdmin={true}/>
<div className='px-5 max-w-md mx-auto mt-10'>
<form className='mt-10' onSubmit={handleMenuFormSubmit}>
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
<EditImage link={menuImg} setLink={setMenuImg}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
<input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
<input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
<input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
</div>
<button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
</form>
<MenuItemForm menuItem={null} handleMenuFormSubmit={handleMenuFormSubmit}/>
<div className='max-w-md mx-auto mt-2'>
<Link href={'/menu-items'} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>Show all menu items</Link>
</div>

34
donutshop_ecommerce/src/components/layout/MenuItemForm.js Normal file
View file

@ -0,0 +1,34 @@
import React, { useState } from 'react'
import EditImage from './EditImage';
const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
const [menuImg, setMenuImg] = useState(menuItem?.menuImg || '');
const [itemName, setItemName] = useState(menuItem?.itemName || '');
const [description, setDescription] = useState(menuItem?.description || '');
const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
return (
<form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice})}>
<div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
<EditImage link={menuImg} setLink={setMenuImg}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Item name</label>
<input type='text' placeholder='Enter items name' value={itemName} onChange={ev => setItemName(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Description</label>
<input type='text' placeholder='Enter discription' value={description} onChange={ev => setDescription(ev.target.value)}/>
</div>
<div>
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
<input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
</div>
<button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
</form>
)
}
export default MenuItemForm