added edit and delete buttons on category page
This commit is contained in:
parent
1f589a75c1
commit
a35b754e86
4 changed files with 49 additions and 24 deletions
|
@ -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)
|
|
@ -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>
|
||||
|
|
|
@ -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 || []);
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -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,8 +27,17 @@ 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]'>
|
||||
<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>
|
||||
|
@ -45,6 +56,7 @@ const MenuItemProps = ({props, setProps}) => {
|
|||
<button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue