Checks if new project name meets requirements
This commit is contained in:
parent
ebe0f380c5
commit
bcac9c020e
1 changed files with 19 additions and 8 deletions
|
@ -5,11 +5,14 @@ import { Link } from "react-router-dom";
|
||||||
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
|
import GetProjectTimes, { projectTimes } from "./GetProjectTimes";
|
||||||
import DeleteProject from "./DeleteProject";
|
import DeleteProject from "./DeleteProject";
|
||||||
import InputField from "./InputField";
|
import InputField from "./InputField";
|
||||||
|
import ProjectNameInput from "./Inputs/ProjectNameInput";
|
||||||
|
import { alphanumeric } from "../Data/regex";
|
||||||
|
import { projNameHighLimit, projNameLowLimit } from "../Data/constants";
|
||||||
|
|
||||||
function ProjectInfoModal(props: {
|
function ProjectInfoModal(props: {
|
||||||
projectname: string;
|
projectname: string;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
onClick: (username: string) => void;
|
onClick: (username: string, userRole: string) => void;
|
||||||
}): JSX.Element {
|
}): JSX.Element {
|
||||||
const [showInput, setShowInput] = useState(false);
|
const [showInput, setShowInput] = useState(false);
|
||||||
const [users, setUsers] = useState<ProjectMember[]>([]);
|
const [users, setUsers] = useState<ProjectMember[]>([]);
|
||||||
|
@ -23,6 +26,7 @@ function ProjectInfoModal(props: {
|
||||||
|
|
||||||
const handleChangeNameView = (): void => {
|
const handleChangeNameView = (): void => {
|
||||||
if (showInput) {
|
if (showInput) {
|
||||||
|
setNewProjName("");
|
||||||
setShowInput(false);
|
setShowInput(false);
|
||||||
} else {
|
} else {
|
||||||
setShowInput(true);
|
setShowInput(true);
|
||||||
|
@ -30,7 +34,16 @@ function ProjectInfoModal(props: {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleClickChangeName = (): void => {
|
const handleClickChangeName = (): void => {
|
||||||
if (newProjName === "") return;
|
if (
|
||||||
|
newProjName.length > projNameHighLimit ||
|
||||||
|
newProjName.length < projNameLowLimit ||
|
||||||
|
!alphanumeric.test(newProjName)
|
||||||
|
) {
|
||||||
|
alert(
|
||||||
|
"Please provide valid project name: \n-Between 10-99 characters \n-No special characters (.-!?/*)",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
confirm(
|
confirm(
|
||||||
|
@ -68,14 +81,12 @@ function ProjectInfoModal(props: {
|
||||||
{showInput && (
|
{showInput && (
|
||||||
<>
|
<>
|
||||||
<h2 className="text-[20px] font-bold pb-2">Change name:</h2>
|
<h2 className="text-[20px] font-bold pb-2">Change name:</h2>
|
||||||
<div className="border-2 rounded-2xl border-black p-6 mb-7 space-y-4">
|
<div className="border-2 rounded-2xl border-black px-6 pt-6 pb-1 mb-7">
|
||||||
<InputField
|
<ProjectNameInput
|
||||||
type={"text"}
|
name={newProjName}
|
||||||
value={newProjName}
|
|
||||||
onChange={function (e): void {
|
onChange={function (e): void {
|
||||||
setNewProjName(e.target.value);
|
setNewProjName(e.target.value);
|
||||||
}}
|
}}
|
||||||
placeholder={"Project Name"}
|
|
||||||
/>
|
/>
|
||||||
<div className="px-6 grid grid-cols-2 gap-10">
|
<div className="px-6 grid grid-cols-2 gap-10">
|
||||||
<Button
|
<Button
|
||||||
|
@ -130,7 +141,7 @@ function ProjectInfoModal(props: {
|
||||||
className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
|
className="items-start px-2 py-1 border-2 border-black rounded-2xl bg-orange-200 transition-all hover:bg-orange-600 hover:text-white hover:cursor-pointer"
|
||||||
key={user.Username}
|
key={user.Username}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
props.onClick(user.Username);
|
props.onClick(user.Username, user.UserRole);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
|
|
Loading…
Reference in a new issue