-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(products): Implement product update and deletion by sellers
- a seller should be able to update a product from their collection - a seller should be able to delete a product from their collection Delivers #187419126
- Loading branch information
Showing
11 changed files
with
396 additions
and
7 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
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
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,67 @@ | ||
| import React from "react"; | ||
| import { FaChevronLeft, FaChevronRight } from "react-icons/fa"; | ||
|
|
||
| interface PaginationProps { | ||
| currentPage: number; | ||
| totalItems: number; | ||
| itemsPerPage: number; | ||
| onPageChange: (page: number) => void; | ||
| onItemsPerPageChange: (itemsPerPage: number) => void; | ||
| } | ||
|
|
||
| const Pagination: React.FC<PaginationProps> = ({ | ||
| currentPage, | ||
| totalItems, | ||
| itemsPerPage, | ||
| onPageChange, | ||
| onItemsPerPageChange, | ||
| }) => { | ||
| const totalPages = Math.ceil(totalItems / itemsPerPage); | ||
|
|
||
| return ( | ||
| <div className="flex justify-between flex-col md:flex-row items-center mt-4"> | ||
| <div className="flex items-center"> | ||
| <label htmlFor="itemsPerPage" className="mr-2 text-black"> | ||
| Show result: | ||
| </label> | ||
| <select | ||
| id="itemsPerPage" | ||
| value={itemsPerPage} | ||
| onChange={(e) => onItemsPerPageChange(Number(e.target.value))} | ||
| className=" bg-transparent border-[0.5px] border-gray-500 text-center bg-slate-100 focus:outline-none text-black px-2 py-1 rounded-lg" | ||
| > | ||
| <option value={2}>2</option> | ||
| <option value={5}>5</option> | ||
| <option value={10}>10</option> | ||
| </select> | ||
| </div> | ||
| <div className="flex items-center py-4"> | ||
| <button | ||
| onClick={() => onPageChange(currentPage - 1)} | ||
| disabled={currentPage === 1} | ||
| className="px-3 py-1 mx-1 rounded-lg bg-gray-200 text-black" | ||
| > | ||
| <FaChevronLeft /> | ||
| </button> | ||
| {Array.from({ length: totalPages }, (_, index) => ( | ||
| <button | ||
| key={index + 1} | ||
| onClick={() => onPageChange(index + 1)} | ||
| className={`px-3 py-1 mx-1 rounded-lg ${currentPage === index + 1 ? "bg-[#DB4444] text-white" : "bg-gray-200 text-black"}`} | ||
| > | ||
| {index + 1} | ||
| </button> | ||
| ))} | ||
| <button | ||
| onClick={() => onPageChange(currentPage + 1)} | ||
| disabled={currentPage === totalPages} | ||
| className="px-3 py-1 mx-1 rounded-lg bg-gray-200 text-black" | ||
| > | ||
| <FaChevronRight /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default Pagination; |
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,59 @@ | ||
| import React from "react"; | ||
|
|
||
| interface ToggleSwitchProps { | ||
| checked: boolean; | ||
| onChange: () => void; | ||
| } | ||
|
|
||
| const ToggleSwitch: React.FC<ToggleSwitchProps> = ({ checked, onChange }) => ( | ||
| <label className="relative inline-flex items-center cursor-pointer"> | ||
| <input | ||
| type="checkbox" | ||
| className="sr-only" | ||
| checked={checked} | ||
| onChange={onChange} | ||
| /> | ||
| <div | ||
| className={`block w-14 h-8 rounded-full ${checked ? "bg-[#DB4444]" : "bg-[#D4D4D4]"}`} | ||
| /> | ||
| <div | ||
| className={`dot absolute left-1 top-1 flex justify-center bg-white w-6 h-6 rounded-full transition ${ | ||
| checked ? "transform translate-x-6" : "" | ||
| }`} | ||
| > | ||
| {checked ? ( | ||
| <svg | ||
| className="w-4 h-4 text-brand-blue mx-auto my-auto" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M5 13l4 4L19 7" | ||
| /> | ||
| </svg> | ||
| ) : ( | ||
| <svg | ||
| className="w-4 h-4 text-gray-700 mx-auto my-auto" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M6 12h12" | ||
| /> | ||
| </svg> | ||
| )} | ||
| </div> | ||
| </label> | ||
| ); | ||
|
|
||
| export default ToggleSwitch; |
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,51 @@ | ||
| import React, { useState } from "react"; | ||
| import { FaAngleDown } from "react-icons/fa"; | ||
|
|
||
| interface CategorySelectProps { | ||
| options: string[]; | ||
| defaultValue: string; | ||
| onSelect: (option: string) => void; | ||
| } | ||
|
|
||
| const CategorySelect: React.FC<CategorySelectProps> = ({ | ||
| options, | ||
| defaultValue, | ||
| onSelect, | ||
| }) => { | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [selectedOption, setSelectedOption] = useState(defaultValue); | ||
|
|
||
| const handleOptionClick = (option: string) => { | ||
| setSelectedOption(option); | ||
| setIsOpen(false); | ||
| onSelect(option); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="relative min-w-40"> | ||
| <div | ||
| className="appearance-none bg-transparent border-[0.5px] flex items-center justify-between text-md gap-2 border-gray-400 text-dark-gray px-4 py-2 rounded-lg cursor-pointer" | ||
| onClick={() => setIsOpen(!isOpen)} | ||
| > | ||
| {selectedOption} | ||
| {' '} | ||
| <FaAngleDown /> | ||
| </div> | ||
| {isOpen && ( | ||
| <div className="absolute top-full left-0 z-10 bg-white w-full text-dark-gray rounded-lg border-[0.5px] border-gray-400 mt-1"> | ||
| {options.map((option) => ( | ||
| <div | ||
| key={option} | ||
| className="px-4 py-2 text-dark-gray whitespace-nowrap text-md hover:bg-slate-50 cursor-pointer" | ||
| onClick={() => handleOptionClick(option)} | ||
| > | ||
| {option} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CategorySelect; |
Oops, something went wrong.