feat: create new checklist item

apps/web/src/views/card/components/NewChecklistItemForm.tsx

@@ -0,0 +1,103 @@
+import { t } from "@lingui/core/macro";
+import ContentEditable from "react-contenteditable";
+import { useForm } from "react-hook-form";
+
+import Button from "~/components/Button";
+import { usePopup } from "~/providers/popup";
+import { api } from "~/utils/api";
+
+interface FormValues {
+  title: string;
+}
+
+interface NewChecklistItemFormProps {
+  checklistPublicId: string;
+  cardPublicId: string;
+  onCancel: () => void;
+}
+
+const NewChecklistItemForm = ({
+  checklistPublicId,
+  cardPublicId,
+  onCancel,
+}: NewChecklistItemFormProps) => {
+  const utils = api.useUtils();
+  const { showPopup } = usePopup();
+
+  const { handleSubmit, setValue, watch, reset } = useForm<FormValues>({
+    defaultValues: {
+      title: "",
+    },
+  });
+
+  const title = watch("title");
+
+  const addChecklistItemMutation = api.checklist.createItem.useMutation({
+    onError: (_error, _newItem) => {
+      showPopup({
+        header: t`Unable to add checklist item`,
+        message: t`Please try again later, or contact customer support.`,
+        icon: "error",
+      });
+    },
+    onSettled: async () => {
+      await utils.card.byId.invalidate({ cardPublicId });
+    },
+    onSuccess: async () => {
+      reset();
+      await utils.card.byId.refetch({ cardPublicId });
+    },
+  });
+
+  const onSubmit = (data: FormValues) => {
+    addChecklistItemMutation.mutate({
+      checklistPublicId,
+      title: data.title,
+    });
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="mt-2 w-full rounded-xl border border-light-600 bg-light-100 p-4 text-light-900 focus-visible:outline-none dark:border-dark-400 dark:bg-dark-100 dark:text-dark-1000"
+    >
+      <div className="mb-3">
+        <ContentEditable
+          placeholder={t`Add an item...`}
+          html={title}
+          disabled={false}
+          onChange={(e) => setValue("title", e.target.value)}
+          className="block w-full border-0 bg-transparent py-1.5 text-light-900 focus-visible:outline-none dark:text-dark-1000 sm:text-sm sm:leading-6"
+          onKeyDown={async (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              await handleSubmit(onSubmit)();
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              onCancel();
+            }
+          }}
+        />
+      </div>
+
+      <div className="flex items-center justify-end">
+        <div className="flex space-x-2">
+          <Button size="xs" type="button" variant="ghost" onClick={onCancel}>
+            {t`Cancel`}
+          </Button>
+          <Button
+            size="xs"
+            type="submit"
+            variant="secondary"
+            disabled={title.length === 0 || addChecklistItemMutation.isPending}
+          >
+            {t`Add`}
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default NewChecklistItemForm;

apps/web/src/views/card/index.tsx

@@ -1,7 +1,9 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { HiPlus, HiXMark } from "react-icons/hi2";
 import { IoChevronForwardSharp } from "react-icons/io5";
 
 import Avatar from "~/components/Avatar";
@@ -27,6 +29,7 @@ import LabelSelector from "./components/LabelSelector";
 import ListSelector from "./components/ListSelector";
 import MemberSelector from "./components/MemberSelector";
 import { NewChecklistForm } from "./components/NewChecklistForm";
+import NewChecklistItemForm from "./components/NewChecklistItemForm";
 import NewCommentForm from "./components/NewCommentForm";
 
 interface FormValues {
@@ -137,6 +140,9 @@ export default function CardPage() {
   const { modalContentType, entityId } = useModal();
   const { showPopup } = usePopup();
   const { workspace } = useWorkspace();
+  const [activeChecklistForm, setActiveChecklistForm] = useState<string | null>(
+    null,
+  );
 
   const cardId = Array.isArray(router.query.cardId)
     ? router.query.cardId[0]
@@ -261,25 +267,54 @@ export default function CardPage() {
                           (item) => item.completed,
                         );
                         const progress =
-                          checklist.items.length > 0
+                          checklist.items.length > 0 &&
+                          completedItems.length > 0
                             ? (completedItems.length / checklist.items.length) *
                               100
                             : 2;
 
+                        console.log({ checklist });
+
                         return (
-                          <div
-                            className="text-md flex items-center gap-3 font-medium text-light-900 dark:text-dark-1000"
-                            key={checklist.publicId}
-                          >
-                            <span>{checklist.name}</span>
-                            <CircularProgress
-                              progress={progress}
-                              size="md"
-                              className="flex-shrink-0"
-                            />
-                            <span className="text-sm text-light-900 dark:text-dark-900">
-                              {completedItems.length}/{checklist.items.length}
-                            </span>
+                          <div key={checklist.publicId}>
+                            <div className="text-md mb-4 flex items-center justify-between font-medium text-light-900 dark:text-dark-1000">
+                              <div className="flex items-center gap-2">
+                                <span>{checklist.name}</span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <div className="flex items-center gap-1 rounded-full border-[1px] border-light-300 px-2 py-1 dark:border-dark-300">
+                                  <CircularProgress
+                                    progress={progress}
+                                    size="sm"
+                                    className="flex-shrink-0"
+                                  />
+                                  <span className="text-[11px] text-light-900 dark:text-dark-700">
+                                    {completedItems.length}/
+                                    {checklist.items.length}
+                                  </span>
+                                </div>
+                                <div>
+                                  <button className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100">
+                                    <HiXMark size={16} />
+                                  </button>
+                                  <button
+                                    onClick={() =>
+                                      setActiveChecklistForm(checklist.publicId)
+                                    }
+                                    className="rounded-md p-1 text-light-900 hover:bg-light-100 dark:text-dark-700 dark:hover:bg-dark-100"
+                                  >
+                                    <HiPlus size={16} />
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                            {activeChecklistForm === checklist.publicId && (
+                              <NewChecklistItemForm
+                                checklistPublicId={checklist.publicId}
+                                cardPublicId={cardId}
+                                onCancel={() => setActiveChecklistForm(null)}
+                              />
+                            )}
                           </div>
                         );
                       })}