forked from github/plane
chore: create/update estimate points validation (#871)
This commit is contained in:
parent
acff6396f9
commit
682a1477fb
@ -1,23 +1,22 @@
|
|||||||
import React, { useEffect, useRef, useState } from "react";
|
import React, { useEffect } from "react";
|
||||||
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
|
||||||
import { mutate } from "swr";
|
import { mutate } from "swr";
|
||||||
|
|
||||||
|
// services
|
||||||
|
import estimatesService from "services/estimates.service";
|
||||||
// headless ui
|
// headless ui
|
||||||
import { Dialog, Transition } from "@headlessui/react";
|
import { Dialog, Transition } from "@headlessui/react";
|
||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
// ui
|
// ui
|
||||||
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
|
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
|
||||||
|
|
||||||
// icons
|
|
||||||
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
|
|
||||||
// types
|
// types
|
||||||
import type { IEstimate, IEstimatePoint } from "types";
|
import type { IEstimate, IEstimatePoint } from "types";
|
||||||
|
// fetch-keys
|
||||||
import estimatesService from "services/estimates.service";
|
|
||||||
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
|
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@ -144,6 +143,21 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
};
|
};
|
||||||
|
|
||||||
const onSubmit = async (formData: FormValues) => {
|
const onSubmit = async (formData: FormValues) => {
|
||||||
|
let c = 0;
|
||||||
|
|
||||||
|
Object.keys(formData).map((key) => {
|
||||||
|
if (formData[key as keyof FormValues] === "") c++;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (c !== 0) {
|
||||||
|
setToastAlert({
|
||||||
|
type: "error",
|
||||||
|
title: "Error!",
|
||||||
|
message: "Please fill all the fields.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (data && data.length !== 0) await updateEstimatePoints(formData);
|
if (data && data.length !== 0) await updateEstimatePoints(formData);
|
||||||
else await createEstimatePoints(formData);
|
else await createEstimatePoints(formData);
|
||||||
|
|
||||||
@ -195,7 +209,7 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
<h4 className="text-lg font-medium leading-6">
|
<h4 className="text-lg font-medium leading-6">
|
||||||
{data ? "Update" : "Create"} Estimate Points
|
{data && data.length > 0 ? "Update" : "Create"} Estimate Points
|
||||||
</h4>
|
</h4>
|
||||||
<div className="grid grid-cols-3 gap-3">
|
<div className="grid grid-cols-3 gap-3">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
@ -206,16 +220,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value1"
|
name="value1"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 1"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@ -228,16 +235,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value2"
|
name="value2"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 2"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@ -250,16 +250,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value3"
|
name="value3"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 3"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@ -272,16 +265,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value4"
|
name="value4"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 4"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@ -294,16 +280,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value5"
|
name="value5"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 5"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
@ -316,16 +295,9 @@ export const EstimatePointsModal: React.FC<Props> = ({ isOpen, data, estimate, o
|
|||||||
id="name"
|
id="name"
|
||||||
name="value6"
|
name="value6"
|
||||||
type="name"
|
type="name"
|
||||||
placeholder="Value"
|
placeholder="Point 6"
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
register={register}
|
register={register}
|
||||||
validations={{
|
|
||||||
required: "value is required",
|
|
||||||
maxLength: {
|
|
||||||
value: 10,
|
|
||||||
message: "Name should be less than 10 characters",
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -21,11 +21,12 @@ import {
|
|||||||
SquaresPlusIcon,
|
SquaresPlusIcon,
|
||||||
ListBulletIcon,
|
ListBulletIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
|
// helpers
|
||||||
|
import { orderArrayBy } from "helpers/array.helper";
|
||||||
// types
|
// types
|
||||||
import { IEstimate, IProject } from "types";
|
import { IEstimate } from "types";
|
||||||
// fetch-keys
|
// fetch-keys
|
||||||
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
|
import { ESTIMATE_POINTS_LIST } from "constants/fetch-keys";
|
||||||
import { orderArrayBy } from "helpers/array.helper";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
estimate: IEstimate;
|
estimate: IEstimate;
|
||||||
@ -41,7 +42,6 @@ export const SingleEstimate: React.FC<Props> = ({
|
|||||||
const [isEstimatePointsModalOpen, setIsEstimatePointsModalOpen] = useState(false);
|
const [isEstimatePointsModalOpen, setIsEstimatePointsModalOpen] = useState(false);
|
||||||
const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
|
const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
|
||||||
|
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { workspaceSlug, projectId } = router.query;
|
const { workspaceSlug, projectId } = router.query;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user