-
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.
- Loading branch information
Showing
15 changed files
with
457 additions
and
24 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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,15 @@ | ||
| import { Sidebar } from '@/components/sidebar/sidebar' | ||
| import Sprints from '@/components/Sprints/Sprints' | ||
| import React from 'react' | ||
|
|
||
| const SprintsPage: React.FC = () => { | ||
| return ( | ||
| <div className='flex'> | ||
| <Sidebar /> | ||
| {/* <IssueTable columns={columns} data={issues} /> */} | ||
| <Sprints /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default SprintsPage |
101 changes: 101 additions & 0 deletions
101
mango-frontend/src/components/Create Sprint/CreateSprint.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,101 @@ | ||
| import React from 'react' | ||
| import { Button } from "@/components/ui/button" | ||
| import { Input } from "@/components/ui/input" | ||
| import { | ||
| Dialog, | ||
| DialogClose, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogFooter, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| } from "@/components/ui/dialog" | ||
| import { Textarea } from "@/components/ui/textarea" | ||
| import DatePicker from './DatePicker' | ||
|
|
||
| interface CreateSprintProps { | ||
| isOpen: boolean; | ||
| onClose: () => void; | ||
| } | ||
|
|
||
| export type InputReturnType = [ | ||
| string, | ||
| (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void, | ||
| () => void | ||
| ]; | ||
|
|
||
| const useInput = (initialValue: string): InputReturnType => { | ||
| const [value, setValue] = React.useState(initialValue); | ||
| const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => { | ||
| setValue(e.target.value); | ||
| }; | ||
|
|
||
| const reset = () => setValue(initialValue); | ||
| return [value, handleChange, reset] as const; | ||
| }; | ||
|
|
||
| const CreateSprint: React.FC<CreateSprintProps> = ({ isOpen, onClose }) => { | ||
|
|
||
| const [title, handleTitleChange, resetTitle] = useInput(''); | ||
| const [description, handleDescriptionChange, resetDescription] = useInput(''); | ||
| const [startDate, setStartDate] = React.useState<Date | null>(null); | ||
| const [endDate, setEndDate] = React.useState<Date | null>(null); | ||
|
|
||
| console.log(title); | ||
| console.log(description) | ||
| console.log(startDate); | ||
| console.log(endDate) | ||
|
|
||
|
|
||
| const handleClose = (): void => { | ||
| resetTitle(); | ||
| resetDescription(); | ||
| setStartDate(null) | ||
| setEndDate(null) | ||
| onClose(); | ||
| } | ||
|
|
||
| return ( | ||
| <div> | ||
| <Dialog open={isOpen} onOpenChange={handleClose}> | ||
| <DialogContent className=""> | ||
| <DialogHeader> | ||
| <div className='w-fit flex gap-3 items-center'> | ||
| <div className='border-2 cursor-pointer p-[2px] rounded-md text-[15px]'>✨Atlas</div> | ||
| <DialogTitle>Create Cycle</DialogTitle> | ||
| </div> | ||
| <DialogDescription /> | ||
| <div className='pt-2 flex flex-col gap-3'> | ||
| <Input id='title' type={'text'} placeholder='Title...' value={title} onChange={handleTitleChange} /> | ||
| <Textarea placeholder='Description' value={description} onChange={handleDescriptionChange} /> | ||
| </div> | ||
| <div className='pt-[10px]'> | ||
| <DatePicker | ||
| startDate={startDate} | ||
| endDate={endDate} | ||
| setStartDate={setStartDate} | ||
| setEndDate={setEndDate} | ||
| /> | ||
| </div> | ||
| </DialogHeader> | ||
| <DialogFooter className="sm:justify-end"> | ||
| <DialogClose asChild> | ||
| <Button className='border-2 bg-white' type="button" variant="secondary" size={'md'} | ||
| onClick={handleClose}> | ||
| Cancel | ||
| </Button> | ||
| </DialogClose> | ||
| <Button type="button" variant="secondary" size={'md'} | ||
| onClick={handleClose} | ||
| className='bg-blue-500 hover:bg-blue-500 text-white' | ||
| > | ||
| Create Issue | ||
| </Button> | ||
| </DialogFooter> | ||
| </DialogContent> | ||
| </Dialog> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default CreateSprint |
81 changes: 81 additions & 0 deletions
81
mango-frontend/src/components/Create Sprint/DatePicker.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,81 @@ | ||
| import * as React from "react" | ||
| import { addDays, isBefore, startOfToday } from "date-fns" | ||
| import { Calendar as CalendarIcon } from "lucide-react" | ||
| import { DateRange } from "react-day-picker" | ||
| import { cn } from "@/lib/utils" | ||
| import { Button } from "@/components/ui/button" | ||
| import { Calendar } from "@/components/ui/calendar" | ||
| import { | ||
| Popover, | ||
| PopoverContent, | ||
| PopoverTrigger, | ||
| } from "@/components/ui/popover" | ||
|
|
||
| interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> { | ||
| startDate: Date | null; | ||
| endDate: Date | null; | ||
| setStartDate: (date: Date | null) => void; | ||
| setEndDate: (date: Date | null) => void | ||
| } | ||
|
|
||
| const DatePicker: React.FC<DatePickerProps> = ({ className, startDate, endDate, setStartDate, setEndDate }) => { | ||
|
|
||
| const [date, setDate] = React.useState<DateRange | undefined>({ | ||
| from: startDate || undefined, | ||
| to: endDate ? addDays(endDate, 20) : undefined | ||
| }); | ||
|
|
||
| const handleSelect = (range: DateRange | undefined) => { | ||
| setDate(range); | ||
| setStartDate(range?.from || null); | ||
| setEndDate(range?.to || null); | ||
| }; | ||
|
|
||
| const formatDate = (date: Date) => { | ||
| return date.toLocaleDateString('en-US', { | ||
| month: 'short', | ||
| day: '2-digit', | ||
| year: 'numeric' | ||
| }) | ||
| } | ||
|
|
||
| const dateRangeText = startDate && endDate ? `${formatDate(startDate)} 🡒 ${formatDate(endDate)}` : "Start date 🡒 End date"; | ||
|
|
||
| return ( | ||
| <div className={cn("grid gap-2", className)}> | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button | ||
| id="date" | ||
| size='datePicker' | ||
| variant={"outline"} | ||
| className={cn( | ||
| "w-fit justify-start text-left font-normal", | ||
| !date && "text-muted-foreground" | ||
| )} | ||
| > | ||
| <CalendarIcon className="mr-2 h-4 w-4" /> | ||
| <span dangerouslySetInnerHTML={{ __html: dateRangeText }} /> | ||
| </Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-auto p-0" align="start"> | ||
| <Calendar | ||
| mode="range" | ||
| defaultMonth={date?.from || startOfToday()} | ||
| selected={date} | ||
| onSelect={handleSelect} | ||
| numberOfMonths={1} | ||
| showOutsideDays={false} | ||
| disabled={(date) => isBefore(date, startOfToday())} | ||
| classNames={{ | ||
| day_selected: "bg-blue-500 text-white", | ||
| day_range_middle: "bg-blue-200 no-hove", | ||
| }} | ||
| /> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default DatePicker; |
Oops, something went wrong.