mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-05-01 11:19:34 +00:00
Formated Files
This commit is contained in:
Ahmad
parent
d5631b309a
commit
e768d9181f
138 changed files with 1829 additions and 1851 deletions
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Copy, Trash } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Copy, Trash } from 'lucide-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { deleteCard } from "@/actions/delete-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { copyCard } from "@/actions/copy-card";
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { deleteCard } from '@/actions/delete-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { copyCard } from '@/actions/copy-card';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { CardWithList } from '@/types';
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
|
||||
interface ActionsProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -66,26 +66,26 @@ export const Actions = ({ data }: ActionsProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2 mt-2">
|
||||
<p className="text-xs font-semibold">Actions</p>
|
||||
<div className='mt-2 space-y-2'>
|
||||
<p className='text-xs font-semibold'>Actions</p>
|
||||
<Button
|
||||
onClick={onCopy}
|
||||
disabled={isLoadingCopy}
|
||||
variant="gray"
|
||||
className="w-full justify-start"
|
||||
size="inline"
|
||||
variant='gray'
|
||||
className='w-full justify-start'
|
||||
size='inline'
|
||||
>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
<Copy className='mr-2 h-4 w-4' />
|
||||
Copy
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onDelete}
|
||||
disabled={isLoadingDelete}
|
||||
variant="gray"
|
||||
className="w-full justify-start text-destructive"
|
||||
size="inline"
|
||||
variant='gray'
|
||||
className='w-full justify-start text-destructive'
|
||||
size='inline'
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
<Trash className='mr-2 h-4 w-4' />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -94,10 +94,10 @@ export const Actions = ({ data }: ActionsProps) => {
|
|||
|
||||
Actions.Skeleton = function ActionsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-2 mt-2">
|
||||
<Skeleton className="w-20 h-4 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-8 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-8 bg-neutral-200" />
|
||||
<div className='mt-2 space-y-2'>
|
||||
<Skeleton className='h-4 w-20 bg-neutral-200' />
|
||||
<Skeleton className='h-8 w-full bg-neutral-200' />
|
||||
<Skeleton className='h-8 w-full bg-neutral-200' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { AuditLog } from "@prisma/client";
|
||||
import { ActivityIcon } from "lucide-react";
|
||||
import { AuditLog } from '@prisma/client';
|
||||
import { ActivityIcon } from 'lucide-react';
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { ActivityItem } from "@/components/activity-item";
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ActivityItem } from '@/components/activity-item';
|
||||
|
||||
interface ActivityProps {
|
||||
items: AuditLog[];
|
||||
|
|
@ -12,11 +12,11 @@ interface ActivityProps {
|
|||
|
||||
export const Activity = ({ items }: ActivityProps) => {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<ActivityIcon className="h-5 w-5 mt-0.5 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<p className="font-semibold text-neutral-700 mb-2">Activity</p>
|
||||
<ol className="mt-2 space-y-4">
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<p className='mb-2 font-semibold text-neutral-700'>Activity</p>
|
||||
<ol className='mt-2 space-y-4'>
|
||||
{items.map((item) => (
|
||||
<ActivityItem key={item.id} data={item} />
|
||||
))}
|
||||
|
|
@ -28,11 +28,11 @@ export const Activity = ({ items }: ActivityProps) => {
|
|||
|
||||
Activity.Skeleton = function ActivitySkeleton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<Skeleton className="h-6 w-6 bg-neutral-200" />
|
||||
<div className="w-full">
|
||||
<Skeleton className="w-24 h-6 mb-2 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-10 bg-neutral-200" />
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<Skeleton className='h-6 w-6 bg-neutral-200' />
|
||||
<div className='w-full'>
|
||||
<Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-10 w-full bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEventListener, useOnClickOutside } from "usehooks-ts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, ElementRef, useRef } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { AlignLeft } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useEventListener, useOnClickOutside } from 'usehooks-ts';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useState, ElementRef, useRef } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { AlignLeft } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormTextarea } from "@/components/form/form-textarea";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { updateCard } from "@/actions/update-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { FormTextarea } from '@/components/form/form-textarea';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { updateCard } from '@/actions/update-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { CardWithList } from '@/types';
|
||||
|
||||
interface DescriptionProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -26,8 +26,8 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const textareaRef = useRef<ElementRef<"textarea">>(null);
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const textareaRef = useRef<ElementRef<'textarea'>>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
|
||||
const enaleEditing = () => {
|
||||
setIsEditing(true);
|
||||
|
|
@ -41,18 +41,18 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
|
||||
const { execute, fieldErrors } = useAction(updateCard, {
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["card", data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["card-logs", data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['card', data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['card-logs', data.id] });
|
||||
toast.success(`Card "${data.title}" updated`);
|
||||
disableEditing();
|
||||
},
|
||||
|
|
@ -62,7 +62,7 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const description = formData.get("description") as string;
|
||||
const description = formData.get('description') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
execute({
|
||||
|
|
@ -73,27 +73,27 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<AlignLeft className="w-5 h-5 mt-0.5 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<p className="font-semibold text-neutral-700 mb-2">Description</p>
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<p className='mb-2 font-semibold text-neutral-700'>Description</p>
|
||||
{isEditing ? (
|
||||
<form ref={formRef} className="space-y-2" action={onSubmit}>
|
||||
<form ref={formRef} className='space-y-2' action={onSubmit}>
|
||||
<FormTextarea
|
||||
id="description"
|
||||
id='description'
|
||||
ref={textareaRef}
|
||||
className="w-full mt-2"
|
||||
placeholder="Add a more detailed description..."
|
||||
className='mt-2 w-full'
|
||||
placeholder='Add a more detailed description...'
|
||||
defaultValue={data.description ?? undefined}
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<FormSubmit>Save</FormSubmit>
|
||||
<Button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={disableEditing}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
@ -102,10 +102,10 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
) : (
|
||||
<div
|
||||
onClick={enaleEditing}
|
||||
role="button"
|
||||
className="min-h-[78px] bg-neutral-200 text-sm font-medium py-3 px-3.5 rounded-md"
|
||||
role='button'
|
||||
className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium'
|
||||
>
|
||||
{data.description ?? "Add a more detailed description..."}
|
||||
{data.description ?? 'Add a more detailed description...'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -115,11 +115,11 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
|
||||
Description.Skeleton = function DescriptionSkeleton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<Skeleton className="h-6 w-6 bg-neutral-200" />
|
||||
<div className="w-full">
|
||||
<Skeleton className="h-6 w-24 mb-2 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-[78px] bg-neutral-200" />
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<Skeleton className='h-6 w-6 bg-neutral-200' />
|
||||
<div className='w-full'>
|
||||
<Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-[78px] w-full bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useRef, ElementRef, useState } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Layout } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useRef, ElementRef, useState } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Layout } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateCard } from "@/actions/update-card";
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { CardWithList } from '@/types';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateCard } from '@/actions/update-card';
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
interface HeaderProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -23,11 +23,11 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
const { execute } = useAction(updateCard, {
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["card", data.id],
|
||||
queryKey: ['card', data.id],
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["card-logs", data.id],
|
||||
queryKey: ['card-logs', data.id],
|
||||
});
|
||||
|
||||
toast.success(`Card renamed to "${data.title}"`);
|
||||
|
|
@ -38,7 +38,7 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
},
|
||||
});
|
||||
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [title, setTitle] = useState(data.title);
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
if (title === data.title) return;
|
||||
|
|
@ -60,20 +60,20 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 mb-6 w-full">
|
||||
<Layout className="h-5 w-5 mt-1 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<div className='mb-6 flex w-full items-start gap-x-3'>
|
||||
<Layout className='mt-1 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<form action={onSubmit}>
|
||||
<FormInput
|
||||
id="title"
|
||||
id='title'
|
||||
ref={inputRef}
|
||||
onBlur={onBlur}
|
||||
defaultValue={title}
|
||||
className="font-semi-bold text-xl px-1 text-neutral-700 bg-transparent border-transparent relative -left-1 w-[95%] focus-visible:bg-white focus-visible:border-input mb-0.5 truncate"
|
||||
className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white'
|
||||
/>
|
||||
</form>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
in list <span className="underline">{data.list.title}</span>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
in list <span className='underline'>{data.list.title}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,11 +82,11 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
|
||||
Header.Skeleton = function HeaderSkelton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 mb-6">
|
||||
<Skeleton className="h-6 w-6 mt-1 bg-neutral-200" />
|
||||
<div className='mb-6 flex items-start gap-x-3'>
|
||||
<Skeleton className='mt-1 h-6 w-6 bg-neutral-200' />
|
||||
<div>
|
||||
<Skeleton className="w-24 h-6 mb-1 bg-neutral-200" />
|
||||
<Skeleton className="w-12 h-4 bg-neutral-200" />
|
||||
<Skeleton className='mb-1 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-4 w-12 bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { fetcher } from "@/lib/fetcher";
|
||||
import { AuditLog } from "@prisma/client";
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { CardWithList } from '@/types';
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { AuditLog } from '@prisma/client';
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
|
||||
import { Header } from "./header";
|
||||
import { Description } from "./description";
|
||||
import { Actions } from "./actions";
|
||||
import { Activity } from "./activity";
|
||||
import { Header } from './header';
|
||||
import { Description } from './description';
|
||||
import { Actions } from './actions';
|
||||
import { Activity } from './activity';
|
||||
|
||||
export const CardModal = () => {
|
||||
const id = useCardModal((state) => state.id);
|
||||
|
|
@ -19,12 +19,12 @@ export const CardModal = () => {
|
|||
const onClose = useCardModal((state) => state.onClose);
|
||||
|
||||
const { data: cardData } = useQuery<CardWithList>({
|
||||
queryKey: ["card", id],
|
||||
queryKey: ['card', id],
|
||||
queryFn: () => fetcher(`/api/cards/${id}`),
|
||||
});
|
||||
|
||||
const { data: auditLogsData } = useQuery<AuditLog[]>({
|
||||
queryKey: ["card-logs", id],
|
||||
queryKey: ['card-logs', id],
|
||||
queryFn: () => fetcher(`/api/cards/${id}/logs`),
|
||||
});
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ export const CardModal = () => {
|
|||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent>
|
||||
{!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 md:gap-4">
|
||||
<div className="col-span-3">
|
||||
<div className="w-full space-y-6">
|
||||
<div className='grid grid-cols-1 md:grid-cols-4 md:gap-4'>
|
||||
<div className='col-span-3'>
|
||||
<div className='w-full space-y-6'>
|
||||
{!cardData ? (
|
||||
<Description.Skeleton />
|
||||
) : (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue