-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* refactor: menu items * feat: categories design * feat: add & remove categories * feat: implemented categories * refactor: products to items * feat: watch category name * refactor: item placeholders * feat: updated pdf
- Loading branch information
Showing
10 changed files
with
249 additions
and
113 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
src/components/MenuBuilder/MenuCategories/MenuCategories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { useFieldArray, useFormContext } from 'react-hook-form'; | ||
|
|
||
| import { Button, Join } from 'react-daisyui'; | ||
|
|
||
| import { FiPlus } from 'react-icons/fi'; | ||
| import MenuCategory from './MenuCategory'; | ||
|
|
||
| const MenuCategories = () => { | ||
| const { control } = useFormContext(); | ||
| const { fields, append, remove } = useFieldArray({ | ||
| control, | ||
| name: 'categories', | ||
| }); | ||
|
|
||
| const addNewCategory = () => { | ||
| append({ | ||
| name: '', | ||
| items: [{}], | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <div className="flex justify-end"> | ||
| <Button | ||
| type="button" | ||
| size="sm" | ||
| color="primary" | ||
| startIcon={<FiPlus size={20} />} | ||
| onClick={addNewCategory}> | ||
| Add Category | ||
| </Button> | ||
| </div> | ||
| <Join className="w-full" vertical={true}> | ||
| {fields.map((field, index) => { | ||
| return ( | ||
| <MenuCategory | ||
| key={field.id} | ||
| categoryIndex={index} | ||
| categoryAmount={fields.length} | ||
| removeCategory={remove} | ||
| /> | ||
| ); | ||
| })} | ||
| </Join> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MenuCategories; |
53 changes: 53 additions & 0 deletions
53
src/components/MenuBuilder/MenuCategories/MenuCategory.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { UseFieldArrayRemove, useWatch } from 'react-hook-form'; | ||
| import { Accordion, Button } from 'react-daisyui'; | ||
|
|
||
| import MenuItems from '../MenuItems/MenuItems'; | ||
| import FormInput from '@/components/FormInput/FormInput'; | ||
|
|
||
| import { FiTrash2 } from 'react-icons/fi'; | ||
|
|
||
| type MenuCategoryProps = { | ||
| categoryIndex: number; | ||
| categoryAmount: number; | ||
| removeCategory: UseFieldArrayRemove; | ||
| }; | ||
|
|
||
| const MenuCategory = ({ | ||
| categoryIndex, | ||
| categoryAmount, | ||
| removeCategory, | ||
| }: MenuCategoryProps) => { | ||
| const categoryName = useWatch({ name: `categories.${categoryIndex}.name` }); | ||
|
|
||
| return ( | ||
| <Accordion | ||
| className="border border-base-500 join-item" | ||
| icon="arrow" | ||
| defaultChecked> | ||
| <Accordion.Title className="text-lg font-medium"> | ||
| {categoryName || 'Category Name'} | ||
| </Accordion.Title> | ||
| <Accordion.Content className="flex flex-col gap-8"> | ||
| <div className="flex justify-between gap-2"> | ||
| <FormInput | ||
| name={`categories.${categoryIndex}.name`} | ||
| placeholder="Category Name" | ||
| size="sm" | ||
| /> | ||
| <Button | ||
| type="button" | ||
| size="sm" | ||
| shape="square" | ||
| color="error" | ||
| disabled={categoryAmount <= 1} | ||
| onClick={() => removeCategory(categoryIndex)}> | ||
| <FiTrash2 size={20} /> | ||
| </Button> | ||
| </div> | ||
| <MenuItems category={`categories.${categoryIndex}`} /> | ||
| </Accordion.Content> | ||
| </Accordion> | ||
| ); | ||
| }; | ||
|
|
||
| export default MenuCategory; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { Button } from 'react-daisyui'; | ||
| import { FiPlus } from 'react-icons/fi'; | ||
|
|
||
| import { useFieldArray, useFormContext } from 'react-hook-form'; | ||
|
|
||
| import MenuItem from './MenuItem'; | ||
|
|
||
| type MenuItemsProps = { | ||
| category: string; | ||
| }; | ||
|
|
||
| const MenuItems = ({ category }: MenuItemsProps) => { | ||
| const { control } = useFormContext(); | ||
| const { fields, append, move, remove } = useFieldArray({ | ||
| control, | ||
| name: `${category}.items`, | ||
| }); | ||
|
|
||
| const addNewItem = () => { | ||
| append({ | ||
| name: '', | ||
| description: '', | ||
| price: 0, | ||
| }); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-2"> | ||
| <div className="flex justify-end"> | ||
| <Button | ||
| type="button" | ||
| size="sm" | ||
| color="primary" | ||
| startIcon={<FiPlus size={20} />} | ||
| onClick={addNewItem}> | ||
| Add Item | ||
| </Button> | ||
| </div> | ||
| {fields.map((field, index) => { | ||
| return ( | ||
| <MenuItem | ||
| key={field.id} | ||
| category={category} | ||
| itemIndex={index} | ||
| itemAmount={fields.length} | ||
| removeItem={remove} | ||
| moveItem={move} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MenuItems; |
Oops, something went wrong.