mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-05-01 19:29:33 +00:00
Formated Files
This commit is contained in:
Ahmad
parent
d5631b309a
commit
e768d9181f
138 changed files with 1829 additions and 1851 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { Board } from "@prisma/client";
|
||||
import { Board } from '@prisma/client';
|
||||
|
||||
import { BoardTitleForm } from "./board-title-form";
|
||||
import { BoardOptions } from "./board-options";
|
||||
import { BoardTitleForm } from './board-title-form';
|
||||
import { BoardOptions } from './board-options';
|
||||
|
||||
interface BoardNavbarProps {
|
||||
data: Board;
|
||||
|
|
@ -9,9 +9,9 @@ interface BoardNavbarProps {
|
|||
|
||||
export const BoardNavbar = async ({ data }: BoardNavbarProps) => {
|
||||
return (
|
||||
<div className="w-full h-14 z-[40] bg-black/50 fixed top-14 flex items-center px-6 gap-x-4 text-white">
|
||||
<div className='fixed top-14 z-[40] flex h-14 w-full items-center gap-x-4 bg-black/50 px-6 text-white'>
|
||||
<BoardTitleForm data={data} />
|
||||
<div className="ml-auto">
|
||||
<div className='ml-auto'>
|
||||
<BoardOptions id={data.id} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { MoreHorizontal, X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { MoreHorizontal, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { deleteBoard } from "@/actions/delete-board";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { deleteBoard } from '@/actions/delete-board';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Popover,
|
||||
PopoverClose,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
} from '@/components/ui/popover';
|
||||
|
||||
interface BoardOptionsProps {
|
||||
id: string;
|
||||
|
|
@ -31,27 +31,27 @@ export const BoardOptions = ({ id }: BoardOptionsProps) => {
|
|||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="h-auto w-auto p-2" variant="transparent">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<Button className='h-auto w-auto p-2' variant='transparent'>
|
||||
<MoreHorizontal className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
Board Actions
|
||||
</div>
|
||||
<PopoverClose asChild>
|
||||
<Button
|
||||
className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
|
||||
variant="ghost"
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<Button
|
||||
variant="ghost"
|
||||
variant='ghost'
|
||||
onClick={onDelete}
|
||||
disabled={isLoading}
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
|
||||
>
|
||||
Delete this board
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { toast } from "sonner";
|
||||
import { ElementRef, useRef, useState } from "react";
|
||||
import { Board } from "@prisma/client";
|
||||
import { toast } from 'sonner';
|
||||
import { ElementRef, useRef, useState } from 'react';
|
||||
import { Board } from '@prisma/client';
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { updateBoard } from "@/actions/update-board";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { updateBoard } from '@/actions/update-board';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
|
||||
interface BoardTitleFormProps {
|
||||
data: Board;
|
||||
|
|
@ -25,8 +25,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
},
|
||||
});
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [title, setTitle] = useState(data.title);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
|
@ -44,7 +44,7 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const title = formData.get('title') as string;
|
||||
|
||||
execute({
|
||||
title,
|
||||
|
|
@ -61,14 +61,14 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
<form
|
||||
action={onSubmit}
|
||||
ref={formRef}
|
||||
className="flex items-center gap-x-2"
|
||||
className='flex items-center gap-x-2'
|
||||
>
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
id="title"
|
||||
id='title'
|
||||
onBlur={onBlur}
|
||||
defaultValue={title}
|
||||
className="text-lg font-bold px-[7px] py-1 h-7 bg-transparent focus-visible:outline-none focus-visible:ring-transparent border-none"
|
||||
className='h-7 border-none bg-transparent px-[7px] py-1 text-lg font-bold focus-visible:outline-none focus-visible:ring-transparent'
|
||||
/>
|
||||
</form>
|
||||
);
|
||||
|
|
@ -77,8 +77,8 @@ export const BoardTitleForm = ({ data }: BoardTitleFormProps) => {
|
|||
return (
|
||||
<Button
|
||||
onClick={enableEditing}
|
||||
variant="transparent"
|
||||
className="font-bold text-lg h-auto w-auto p-1 px-2"
|
||||
variant='transparent'
|
||||
className='h-auto w-auto p-1 px-2 text-lg font-bold'
|
||||
>
|
||||
{title}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from "react";
|
||||
import { useOnClickOutside, useEventListener } from "usehooks-ts";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { forwardRef, useRef, ElementRef, KeyboardEventHandler } from 'react';
|
||||
import { useOnClickOutside, useEventListener } from 'usehooks-ts';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createCard } from "@/actions/create-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormTextarea } from "@/components/form/form-textarea";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createCard } from '@/actions/create-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormTextarea } from '@/components/form/form-textarea';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
|
||||
interface CardFormProps {
|
||||
listId: string;
|
||||
|
|
@ -22,7 +22,7 @@ interface CardFormProps {
|
|||
export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
||||
({ listId, isEditing, enableEditing, disableEditing }, ref) => {
|
||||
const params = useParams();
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
|
||||
const { execute, fieldErrors } = useAction(createCard, {
|
||||
onSuccess: (data) => {
|
||||
|
|
@ -35,26 +35,26 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
});
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
|
||||
const onTextareaKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (
|
||||
e
|
||||
) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
formRef.current?.requestSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const listId = formData.get("listId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const listId = formData.get('listId') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
execute({ title, listId, boardId });
|
||||
|
|
@ -65,20 +65,20 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
<form
|
||||
ref={formRef}
|
||||
action={onSubmit}
|
||||
className="m-1 py-0.5 px-1 space-y-4"
|
||||
className='m-1 space-y-4 px-1 py-0.5'
|
||||
>
|
||||
<FormTextarea
|
||||
id="title"
|
||||
id='title'
|
||||
onKeyDown={onTextareaKeyDown}
|
||||
ref={ref}
|
||||
placeholder="Enter a title for this card..."
|
||||
placeholder='Enter a title for this card...'
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
<input hidden id="listId" name="listId" value={listId} />
|
||||
<div className="flex items-center gap-x-1">
|
||||
<input hidden id='listId' name='listId' value={listId} />
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<FormSubmit>Add card</FormSubmit>
|
||||
<Button onClick={disableEditing} size="sm" variant="ghost">
|
||||
<X className="w-5 h-5" />
|
||||
<Button onClick={disableEditing} size='sm' variant='ghost'>
|
||||
<X className='h-5 w-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -86,14 +86,14 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="pt-2 px-2">
|
||||
<div className='px-2 pt-2'>
|
||||
<Button
|
||||
onClick={enableEditing}
|
||||
className="h-auto px-2 py-1.5 w-full justify-start text-muted-foreground text-sm"
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start px-2 py-1.5 text-sm text-muted-foreground'
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className='mr-2 h-4 w-4' />
|
||||
Add a card
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -101,4 +101,4 @@ export const CardForm = forwardRef<HTMLTextAreaElement, CardFormProps>(
|
|||
}
|
||||
);
|
||||
|
||||
CardForm.displayName = "CardForm";
|
||||
CardForm.displayName = 'CardForm';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Draggable } from "@hello-pangea/dnd";
|
||||
import { Card } from "@prisma/client";
|
||||
import { Draggable } from '@hello-pangea/dnd';
|
||||
import { Card } from '@prisma/client';
|
||||
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
|
||||
interface CardItemProps {
|
||||
index: number;
|
||||
|
|
@ -20,9 +20,9 @@ export const CardItem = ({ index, data }: CardItemProps) => {
|
|||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
ref={provided.innerRef}
|
||||
role="button"
|
||||
role='button'
|
||||
onClick={() => cardModal.onOpen(data.id)}
|
||||
className="truncate border-2 border-transparent hover:border-black py-2 px-3 text-sm bg-white rounded-md shadow-sm"
|
||||
className='truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm hover:border-black'
|
||||
>
|
||||
{data.title}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { DragDropContext, Droppable } from "@hello-pangea/dnd";
|
||||
import { toast } from "sonner";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DragDropContext, Droppable } from '@hello-pangea/dnd';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateListOrder } from "@/actions/update-list-order";
|
||||
import { updateCardOrder } from "@/actions/update-card-order";
|
||||
import { ListWithCards } from "@/types";
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateListOrder } from '@/actions/update-list-order';
|
||||
import { updateCardOrder } from '@/actions/update-card-order';
|
||||
import { ListWithCards } from '@/types';
|
||||
|
||||
import { ListForm } from "./list-form";
|
||||
import { ListItem } from "./list-item";
|
||||
import { ListForm } from './list-form';
|
||||
import { ListItem } from './list-item';
|
||||
|
||||
interface ListContainerProps {
|
||||
data: ListWithCards[];
|
||||
|
|
@ -30,7 +30,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
const { execute: executeUpdateListOrder } = useAction(updateListOrder, {
|
||||
onSuccess: () => {
|
||||
toast.success("List reordered");
|
||||
toast.success('List reordered');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
|
|
@ -39,7 +39,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
const { execute: executeUpdateCardOrder } = useAction(updateCardOrder, {
|
||||
onSuccess: () => {
|
||||
toast.success("Card reordered");
|
||||
toast.success('Card reordered');
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error);
|
||||
|
|
@ -63,7 +63,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
return;
|
||||
|
||||
// User moves a list
|
||||
if (type === "list") {
|
||||
if (type === 'list') {
|
||||
const items = reorder(orderedData, source.index, destination.index).map(
|
||||
(item, index) => ({ ...item, order: index })
|
||||
);
|
||||
|
|
@ -72,7 +72,7 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
}
|
||||
|
||||
// User moves a card
|
||||
if (type === "card") {
|
||||
if (type === 'card') {
|
||||
let newOrderedData = [...orderedData];
|
||||
|
||||
// Get source and destination list
|
||||
|
|
@ -142,19 +142,19 @@ export const ListContainer = ({ data, boardId }: ListContainerProps) => {
|
|||
|
||||
return (
|
||||
<DragDropContext onDragEnd={onDragEnd}>
|
||||
<Droppable droppableId="lists" type="list" direction="horizontal">
|
||||
<Droppable droppableId='lists' type='list' direction='horizontal'>
|
||||
{(provided) => (
|
||||
<ol
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
className="flex gap-x-3 h-full"
|
||||
className='flex h-full gap-x-3'
|
||||
>
|
||||
{orderedData.map((list, index) => {
|
||||
return <ListItem key={list.id} index={index} data={list} />;
|
||||
})}
|
||||
{provided.placeholder}
|
||||
<ListForm />
|
||||
<div className="flex-shrink-0 w-1" />
|
||||
<div className='w-1 flex-shrink-0' />
|
||||
</ol>
|
||||
)}
|
||||
</Droppable>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Plus, X } from "lucide-react";
|
||||
import { useState, useRef, ElementRef } from "react";
|
||||
import { useEventListener, useOnClickOutside } from "usehooks-ts";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Plus, X } from 'lucide-react';
|
||||
import { useState, useRef, ElementRef } from 'react';
|
||||
import { useEventListener, useOnClickOutside } from 'usehooks-ts';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createList } from "@/actions/create-list";
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createList } from '@/actions/create-list';
|
||||
|
||||
import { ListWrapper } from "./list-wrapper";
|
||||
import { ListWrapper } from './list-wrapper';
|
||||
|
||||
export const ListForm = () => {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
|
|
@ -46,17 +46,17 @@ export const ListForm = () => {
|
|||
});
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
execute({ title, boardId });
|
||||
};
|
||||
|
|
@ -67,20 +67,20 @@ export const ListForm = () => {
|
|||
<form
|
||||
action={onSubmit}
|
||||
ref={formRef}
|
||||
className="w-full p-3 rounded-md bg-white space-y-4 shadow-md"
|
||||
className='w-full space-y-4 rounded-md bg-white p-3 shadow-md'
|
||||
>
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
errors={fieldErrors}
|
||||
id="title"
|
||||
className="text-sm px-2 py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition"
|
||||
placeholder="Enter list title..."
|
||||
id='title'
|
||||
className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
|
||||
placeholder='Enter list title...'
|
||||
/>
|
||||
<input hidden value={params.boardId} name="boardId" />
|
||||
<div className="flex items-center gap-x-1">
|
||||
<input hidden value={params.boardId} name='boardId' />
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<FormSubmit>Add list</FormSubmit>
|
||||
<Button onClick={disableEditing} size="sm" variant="ghost">
|
||||
<X className="h-5 w-5" />
|
||||
<Button onClick={disableEditing} size='sm' variant='ghost'>
|
||||
<X className='h-5 w-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -92,9 +92,9 @@ export const ListForm = () => {
|
|||
<ListWrapper>
|
||||
<button
|
||||
onClick={enableEditing}
|
||||
className="w-full rounded-md bg-white/80 hover:bg-white/50 transition p-3 flex items-center font-medium text-sm"
|
||||
className='flex w-full items-center rounded-md bg-white/80 p-3 text-sm font-medium transition hover:bg-white/50'
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<Plus className='mr-2 h-4 w-4' />
|
||||
Add a list
|
||||
</button>
|
||||
</ListWrapper>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, ElementRef } from "react";
|
||||
import { useEventListener } from "usehooks-ts";
|
||||
import { List } from "@prisma/client";
|
||||
import { toast } from "sonner";
|
||||
import { useState, useRef, ElementRef } from 'react';
|
||||
import { useEventListener } from 'usehooks-ts';
|
||||
import { List } from '@prisma/client';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateList } from "@/actions/update-list";
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateList } from '@/actions/update-list';
|
||||
|
||||
import { ListOptions } from "./list-options";
|
||||
import { ListOptions } from './list-options';
|
||||
|
||||
interface ListHeaderProps {
|
||||
data: List;
|
||||
|
|
@ -20,8 +20,8 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
const [title, setTitle] = useState(data.title);
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const enableEditing = () => {
|
||||
setIsEditing(true);
|
||||
|
|
@ -47,9 +47,9 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
if (title === data.title) return disableEditing();
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
formRef.current?.requestSubmit();
|
||||
}
|
||||
};
|
||||
|
|
@ -66,28 +66,28 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
formRef.current?.requestSubmit();
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
|
||||
return (
|
||||
<div className="pt-2 px-2 text-sm font-semibold flex justify-between items-start gap-x-2">
|
||||
<div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
|
||||
{isEditing ? (
|
||||
<form ref={formRef} action={onSubmit} className="flex-1 px-[2px]">
|
||||
<input hidden id="id" name="id" value={data.id} />
|
||||
<input hidden id="boardId" name="boardId" value={data.boardId} />
|
||||
<form ref={formRef} action={onSubmit} className='flex-1 px-[2px]'>
|
||||
<input hidden id='id' name='id' value={data.id} />
|
||||
<input hidden id='boardId' name='boardId' value={data.boardId} />
|
||||
<FormInput
|
||||
ref={inputRef}
|
||||
onBlur={onBlur}
|
||||
id="title"
|
||||
placeholder="Enter list title..."
|
||||
id='title'
|
||||
placeholder='Enter list title...'
|
||||
defaultValue={title}
|
||||
className="text-sm px-[7px] py-1 h-7 font-medium border-transparent hover:border-input focus:border-input transition truncate bg-transparent focus:bg-white"
|
||||
className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
|
||||
/>
|
||||
<button hidden type="submit" />
|
||||
<button hidden type='submit' />
|
||||
</form>
|
||||
) : (
|
||||
<div
|
||||
onClick={enableEditing}
|
||||
className="w-full text-sm px-2.5 py-1 h-7 font-medium border-transparent"
|
||||
className='h-7 w-full border-transparent px-2.5 py-1 text-sm font-medium'
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { ElementRef, useRef, useState } from "react";
|
||||
import { Draggable, Droppable } from "@hello-pangea/dnd";
|
||||
import { ElementRef, useRef, useState } from 'react';
|
||||
import { Draggable, Droppable } from '@hello-pangea/dnd';
|
||||
|
||||
import { ListWithCards } from "@/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { ListWithCards } from '@/types';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { ListHeader } from "./list-header";
|
||||
import { CardForm } from "./card-form";
|
||||
import { CardItem } from "./card-item";
|
||||
import { ListHeader } from './list-header';
|
||||
import { CardForm } from './card-form';
|
||||
import { CardItem } from './card-item';
|
||||
|
||||
interface ListItemProps {
|
||||
data: ListWithCards;
|
||||
|
|
@ -16,7 +16,7 @@ interface ListItemProps {
|
|||
}
|
||||
|
||||
export const ListItem = ({ index, data }: ListItemProps) => {
|
||||
const textareaRef = useRef<ElementRef<"textarea">>(null);
|
||||
const textareaRef = useRef<ElementRef<'textarea'>>(null);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
|
|
@ -37,21 +37,21 @@ export const ListItem = ({ index, data }: ListItemProps) => {
|
|||
<li
|
||||
{...provided.draggableProps}
|
||||
ref={provided.innerRef}
|
||||
className="shrink-0 h-full w-[272px] select-none"
|
||||
className='h-full w-[272px] shrink-0 select-none'
|
||||
>
|
||||
<div
|
||||
{...provided.dragHandleProps}
|
||||
className="w-full rounded-md bg-[#f1f2f4] shadow-md pb-2"
|
||||
className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'
|
||||
>
|
||||
<ListHeader onAddCard={enableEditing} data={data} />
|
||||
<Droppable droppableId={data.id} type="card">
|
||||
<Droppable droppableId={data.id} type='card'>
|
||||
{(provided) => (
|
||||
<ol
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className={cn(
|
||||
"mx-1 px-1 py-0.5 flex flex-col gap-y-2",
|
||||
data.cards.length > 0 ? "mt-2" : "mt-0"
|
||||
'mx-1 flex flex-col gap-y-2 px-1 py-0.5',
|
||||
data.cards.length > 0 ? 'mt-2' : 'mt-0'
|
||||
)}
|
||||
>
|
||||
{data.cards.map((card, index) => (
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { MoreHorizontal, X } from "lucide-react";
|
||||
import { ElementRef, useRef } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { List } from "@prisma/client";
|
||||
import { MoreHorizontal, X } from 'lucide-react';
|
||||
import { ElementRef, useRef } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { List } from '@prisma/client';
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
PopoverClose,
|
||||
} from "@/components/ui/popover";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { deleteList } from "@/actions/delete-list";
|
||||
import { copyList } from "@/actions/copy-list";
|
||||
} from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { deleteList } from '@/actions/delete-list';
|
||||
import { copyList } from '@/actions/copy-list';
|
||||
|
||||
interface ListOptionsProps {
|
||||
data: List;
|
||||
|
|
@ -24,7 +24,7 @@ interface ListOptionsProps {
|
|||
}
|
||||
|
||||
export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
||||
const closeRef = useRef<ElementRef<"button">>(null);
|
||||
const closeRef = useRef<ElementRef<'button'>>(null);
|
||||
|
||||
const { execute: executeDelete } = useAction(deleteList, {
|
||||
onSuccess: () => {
|
||||
|
|
@ -47,15 +47,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
});
|
||||
|
||||
const onDelete = (formData: FormData) => {
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
executeDelete({ id, boardId });
|
||||
};
|
||||
|
||||
const onCopy = (formData: FormData) => {
|
||||
const id = formData.get("id") as string;
|
||||
const boardId = formData.get("boardId") as string;
|
||||
const id = formData.get('id') as string;
|
||||
const boardId = formData.get('boardId') as string;
|
||||
|
||||
executeCopy({ id, boardId });
|
||||
};
|
||||
|
|
@ -63,46 +63,46 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button className="h-auto w-auto p-2" variant="ghost">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
<Button className='h-auto w-auto p-2' variant='ghost'>
|
||||
<MoreHorizontal className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="px-0 pt-3 pb-3" side="bottom" align="start">
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
List Actions
|
||||
</div>
|
||||
<PopoverClose ref={closeRef} asChild>
|
||||
<Button
|
||||
className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
|
||||
variant="ghost"
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<Button
|
||||
onClick={onAddCard}
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
|
||||
variant='ghost'
|
||||
>
|
||||
Add card...
|
||||
</Button>
|
||||
<form action={onCopy}>
|
||||
<input hidden name="id" id="id" value={data.id} />
|
||||
<input hidden name="boardId" id="boardId" value={data.boardId} />
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<FormSubmit
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
|
||||
variant='ghost'
|
||||
>
|
||||
Copy list...
|
||||
</FormSubmit>
|
||||
</form>
|
||||
<Separator />
|
||||
<form action={onDelete}>
|
||||
<input hidden name="id" id="id" value={data.id} />
|
||||
<input hidden name="boardId" id="boardId" value={data.boardId} />
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<FormSubmit
|
||||
className="rounded-none w-full h-auto p-2 px-5 justify-start font-normal text-sm text-destructive hover:text-destructive"
|
||||
variant="ghost"
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
|
||||
variant='ghost'
|
||||
>
|
||||
Delete this list
|
||||
</FormSubmit>
|
||||
|
|
|
|||
|
|
@ -3,5 +3,5 @@ interface ListWrapperProps {
|
|||
}
|
||||
|
||||
export const ListWrapper = ({ children }: ListWrapperProps) => {
|
||||
return <li className="shrink-0 h-full w-[272px] select-none">{children}</li>;
|
||||
return <li className='h-full w-[272px] shrink-0 select-none'>{children}</li>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { auth } from "@clerk/nextjs";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { notFound, redirect } from 'next/navigation';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { BoardNavbar } from "./_components/board-navbar";
|
||||
import { db } from '@/lib/db';
|
||||
import { BoardNavbar } from './_components/board-navbar';
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
|
|
@ -11,7 +11,7 @@ export async function generateMetadata({
|
|||
}) {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) return { title: "Board" };
|
||||
if (!orgId) return { title: 'Board' };
|
||||
|
||||
const board = await db.board.findUnique({
|
||||
where: {
|
||||
|
|
@ -21,7 +21,7 @@ export async function generateMetadata({
|
|||
});
|
||||
|
||||
return {
|
||||
title: board?.title ?? "Board",
|
||||
title: board?.title ?? 'Board',
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -34,7 +34,7 @@ const BoardIdLayout = async ({
|
|||
}) => {
|
||||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) redirect("/select-org");
|
||||
if (!orgId) redirect('/select-org');
|
||||
|
||||
const board = await db.board.findUnique({
|
||||
where: {
|
||||
|
|
@ -47,12 +47,12 @@ const BoardIdLayout = async ({
|
|||
|
||||
return (
|
||||
<div
|
||||
className="relative h-full bg-no-repeat bg-cover bg-center"
|
||||
className='relative h-full bg-cover bg-center bg-no-repeat'
|
||||
style={{ backgroundImage: `url(${board.imageFullUrl})` }}
|
||||
>
|
||||
<BoardNavbar data={board} />
|
||||
<div className="absolute inset-0 bg-black/10" />
|
||||
<main className="relative pt-28 h-full">{children}</main>
|
||||
<div className='absolute inset-0 bg-black/10' />
|
||||
<main className='relative h-full pt-28'>{children}</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { auth } from "@clerk/nextjs";
|
||||
import { redirect } from "next/navigation";
|
||||
import { auth } from '@clerk/nextjs';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import { db } from "@/lib/db";
|
||||
import { ListContainer } from "./_components/list-container";
|
||||
import { db } from '@/lib/db';
|
||||
import { ListContainer } from './_components/list-container';
|
||||
|
||||
interface BoardIdPageProps {
|
||||
params: {
|
||||
|
|
@ -14,7 +14,7 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
|
|||
const { orgId } = auth();
|
||||
|
||||
if (!orgId) {
|
||||
redirect("/select-org");
|
||||
redirect('/select-org');
|
||||
}
|
||||
|
||||
const lists = await db.list.findMany({
|
||||
|
|
@ -27,20 +27,20 @@ const BoardIdPage = async ({ params }: BoardIdPageProps) => {
|
|||
include: {
|
||||
cards: {
|
||||
orderBy: {
|
||||
order: "asc",
|
||||
order: 'asc',
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: {
|
||||
order: "asc",
|
||||
order: 'asc',
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-4 h-full overflow-x-auto">
|
||||
<div className='h-full overflow-x-auto p-4'>
|
||||
<ListContainer boardId={params.boardId} data={lists} />
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default BoardIdPage;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue