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

added edit and delete buttons on category page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-05-20 16:00:40 -05:00
parent 1f589a75c1
commit a35b754e86
4 changed files with 49 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
donutshop_ecommerce/src/app/api/models/MenuItem.js
View file

@ -1,5 +1,10 @@
import { Schema, model, models } from "mongoose";
const ExtraPriceSchema = new Schema({
itemName: String,
price: Number,
});
const MenuItemSchema = new Schema({
itemName:{
type: String
@ -13,7 +18,9 @@ const MenuItemSchema = new Schema({
basePrice:{
type: Number
},
sizes:{
type: [ExtraPriceSchema]
}
}, {timestamps: true})
export const MenuItem = models?.MenuItem || model('MenuItem', MenuItemSchema)

16
donutshop_ecommerce/src/app/categories/page.js
View file

@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react'
import UserTab from '../../components/layout/UserTab'
import useProfile from '../../components/UseProfile'
import toast from 'react-hot-toast'
import { LiaEditSolid } from "react-icons/lia";
import { IoTrashOutline } from "react-icons/io5";
const CategoriesPage = () => {
const {loading:profileLoading, data:profileData} = useProfile();
@ -70,7 +72,7 @@ const CategoriesPage = () => {
<label className='-mb-1 text-gray-700 font-semibold text-sm flex'>
{editCategory ? 'Update category' : 'New category name'}
{editCategory && (
<div className='font-notmal'>: {editCategory.name}</div>
<div className='font-normal'>: {editCategory.name}</div>
)}
</label>
<div className='flex gap-2 items-center'>
@ -84,11 +86,15 @@ const CategoriesPage = () => {
</div>
</form>
<div className='mt-5'>
<label className='-mb-1 text-gray-700 font-semibold text-sm'>Edit category</label>
<label className='-mb-1 text-gray-700 font-semibold text-sm'>Categories</label>
{categories?.length > 0 && categories.map(c => (
<button onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='w-full p-2 flex justify-center items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300'>
<p>{c.name}</p>
</button>
<div className='w-full p-2 flex justify-between my-2 rounded-md outline-none border border-[#DCA0AE] duration-300'>
<p onClick={() => {setEditCategory(c); setCategoryName(c.name)}} className='cursor-pointer hover:text-gray-600'>{c.name}</p>
<div className='flex gap-2'>
<button type='button' className='text-green-600 hover:opacity-60'><LiaEditSolid/></button>
<button type='button' className='text-red-600 hover:opacity-60'><IoTrashOutline/></button>
</div>
</div>
))}
</div>
</div>

2
donutshop_ecommerce/src/components/layout/MenuItemForm.js
View file

@ -8,7 +8,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
const [itemName, setItemName] = useState(menuItem?.itemName || '');
const [description, setDescription] = useState(menuItem?.description || '');
const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
const [sizes, setSizes] = useState([]);
const [sizes, setSizes] = useState(menuItem?.sizes || []);

46
donutshop_ecommerce/src/components/layout/MenuItemProps.js
View file

@ -1,7 +1,9 @@
import React from 'react'
import React, { useState } from 'react'
import { IoTrashOutline } from "react-icons/io5";
import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";
const MenuItemProps = ({props, setProps}) => {
const [isOpen, setIsOpen] = useState(false);
function addProp(){
setProps(oldProp => {
@ -25,24 +27,34 @@ const MenuItemProps = ({props, setProps}) => {
return (
<div>
<label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts</label>
<div className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]'>
{props?.length > 0 && props.map((size, index) => (
<div className='flex gap-2 items-center'>
<div>
<label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
<input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
<button onClick={() => setIsOpen(prev => !prev)} type='button' className='w-full flex justify-between items-center text-[#DCA0AE] '>
<label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts ({props.length})</label>
{isOpen && (
<MdKeyboardArrowUp/>
)}
{!isOpen && (
<MdKeyboardArrowDown/>
)}
</button>
<div className={isOpen ? 'block' : 'hidden'}>
{props?.length > 0 && props.map((size, index) => (
<div className='flex gap-2 items-center'>
<div>
<label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
<input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
</div>
<div>
<label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
<input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
</div>
<div className='flex items-center mt-5 text-red-500'>
<button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
</div>
</div>
<div>
<label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
<input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
</div>
<div className='flex items-center mt-5 text-red-500'>
<button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
</div>
</div>
))}
<button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
))}
<button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
</div>
</div>
</div>
)