// react import React, { useState } from "react"; // swr import useSWR from "swr"; // react-hook-form import { Controller, SubmitHandler, useForm } from "react-hook-form"; // react-color import { TwitterPicker } from "react-color"; // services import issuesService from "lib/services/issues.service"; // hooks import useUser from "lib/hooks/useUser"; // layouts import SettingsLayout from "layouts/settings-layout"; // components import SingleLabel from "components/project/settings/single-label"; // headless ui import { Popover, Transition } from "@headlessui/react"; // ui import { Button, Input, Spinner } from "ui"; // icons import { PlusIcon } from "@heroicons/react/24/outline"; // fetch-keys import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys"; // types import { IIssueLabels } from "types"; const defaultValues: Partial = { name: "", colour: "#ff0000", }; const LabelsSettings = () => { const [newLabelForm, setNewLabelForm] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [labelIdForUpdate, setLabelidForUpdate] = useState(null); const { activeWorkspace, activeProject } = useUser(); const { register, handleSubmit, reset, control, setValue, formState: { errors, isSubmitting }, watch, } = useForm({ defaultValues }); const { data: issueLabels, mutate } = useSWR( activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null, activeProject && activeWorkspace ? () => issuesService.getIssueLabels(activeWorkspace.slug, activeProject.id) : null ); const handleNewLabel: SubmitHandler = (formData) => { if (!activeWorkspace || !activeProject || isSubmitting) return; issuesService.createIssueLabel(activeWorkspace.slug, activeProject.id, formData).then((res) => { console.log(res); reset(defaultValues); mutate((prevData) => [...(prevData ?? []), res], false); setNewLabelForm(false); }); }; const editLabel = (label: IIssueLabels) => { setNewLabelForm(true); setValue("colour", label.colour); setValue("name", label.name); setIsUpdating(true); setLabelidForUpdate(label.id); }; const handleLabelUpdate: SubmitHandler = (formData) => { if (!activeWorkspace || !activeProject || isSubmitting) return; issuesService .patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData) .then((res) => { console.log(res); reset(defaultValues); mutate( (prevData) => prevData?.map((p) => (p.id === labelIdForUpdate ? { ...p, ...formData } : p)), false ); setNewLabelForm(false); }); }; const handleLabelDelete = (labelId: string) => { if (activeWorkspace && activeProject) { mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false); issuesService .deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId) .then((res) => { console.log(res); }) .catch((e) => { console.log(e); }); } }; return (

Labels

Manage the labels of this project.

Manage labels

{({ open }) => ( <> {watch("colour") && watch("colour") !== "" && ( )} ( onChange(value.hex)} /> )} /> )}
{isUpdating ? ( ) : ( )}
<> {issueLabels ? ( issueLabels.map((label) => ( )) ) : (
)}
); }; export default LabelsSettings;