ahmadk953/tasko
1
0
Fork 0
mirror of https://github.com/ahmadk953/tasko.git synced 2025-05-02 03:39:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Formated Files

Browse source
This commit is contained in:
Ahmad 2024-02-15 20:49:19 -05:00
parent d5631b309a
commit e768d9181f
No known key found for this signature in database
GPG key ID: 8FD8A93530D182BF
138 changed files with 1829 additions and 1851 deletions
Download patch file Download diff file Expand all files Collapse all files

82
components/modals/card-modal/description.tsx
View file

@ -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>
);