forked from github/plane
style: create project modal (#1628)
* style: create project modal * fix: build error * fix: modal width
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
ccbcfecc6d
commit
a7b5ad55ab
@ -360,11 +360,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<h6 className="text-custom-text-200">Network</h6>
|
||||
<span>
|
||||
{
|
||||
NETWORK_CHOICES[
|
||||
`${projectDetails?.network}` as keyof typeof NETWORK_CHOICES
|
||||
]
|
||||
}
|
||||
{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
|
||||
""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,7 +62,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
|
||||
return (
|
||||
<Popover className="relative z-[2]" ref={ref}>
|
||||
<Popover.Button
|
||||
className="rounded-md border border-custom-border-200 bg-custom-background-80 px-2 py-1 text-xs text-custom-text-200"
|
||||
className="rounded-md border border-custom-border-300 bg-custom-background-100 px-2 py-1 text-xs text-custom-text-200 hover:text-custom-text-100"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
{label}
|
||||
@ -77,7 +77,7 @@ export const ImagePickerPopover: React.FC<Props> = ({ label, value, onChange })
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Popover.Panel className="absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
|
||||
<div className="h-96 w-80 overflow-auto rounded border border-custom-border-200 bg-custom-background-80 p-5 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
|
||||
<div className="h-96 w-80 overflow-auto rounded border border-custom-border-300 bg-custom-background-100 p-3 shadow-2xl sm:max-w-2xl md:w-96 lg:w-[40rem]">
|
||||
<Tab.Group>
|
||||
<Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
|
||||
{tabOptions.map((tab) => (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
// headless ui
|
||||
import { Tab, Transition, Popover } from "@headlessui/react";
|
||||
// react colors
|
||||
@ -11,8 +11,6 @@ import icons from "./icons.json";
|
||||
// helpers
|
||||
import { getRecentEmojis, saveRecentEmoji } from "./helpers";
|
||||
import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
|
||||
// hooks
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
|
||||
const tabOptions = [
|
||||
{
|
||||
@ -26,8 +24,6 @@ const tabOptions = [
|
||||
];
|
||||
|
||||
const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorChange }) => {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [openColorPicker, setOpenColorPicker] = useState(false);
|
||||
const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
|
||||
@ -38,20 +34,13 @@ const EmojiIconPicker: React.FC<Props> = ({ label, value, onChange, onIconColorC
|
||||
setRecentEmojis(getRecentEmojis());
|
||||
}, []);
|
||||
|
||||
useOutsideClickDetector(ref, () => {
|
||||
setIsOpen(false);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!value || value?.length === 0) onChange(getRandomEmoji());
|
||||
}, [value, onChange]);
|
||||
|
||||
return (
|
||||
<Popover className="relative z-[1]" ref={ref}>
|
||||
<Popover.Button
|
||||
className="rounded-full bg-custom-background-90 p-2 outline-none sm:text-sm"
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
>
|
||||
<Popover className="relative z-[1]">
|
||||
<Popover.Button onClick={() => setIsOpen((prev) => !prev)} className="outline-none">
|
||||
{label}
|
||||
</Popover.Button>
|
||||
<Transition
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export type Props = {
|
||||
label: string | React.ReactNode;
|
||||
label: React.ReactNode;
|
||||
value: any;
|
||||
onChange: (
|
||||
data:
|
||||
|
||||
@ -30,7 +30,7 @@ export const JiraImportUsers: FC = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString());
|
||||
const { workspaceMembers: members } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
||||
|
||||
const options = members?.map((member) => ({
|
||||
value: member.member.email,
|
||||
|
||||
@ -21,7 +21,6 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
// fetching project members
|
||||
const { data: members } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
|
||||
@ -55,7 +55,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
value={value ?? []}
|
||||
label={
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
|
||||
@ -2,19 +2,29 @@ import React, { useState, useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
import { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
// services
|
||||
import projectServices from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
|
||||
import useWorkspaceMembers from "hooks/use-workspace-members";
|
||||
// ui
|
||||
import { Input, TextArea, CustomSelect, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
import {
|
||||
Input,
|
||||
TextArea,
|
||||
CustomSelect,
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
Icon,
|
||||
Avatar,
|
||||
CustomSearchSelect,
|
||||
} from "components/ui";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// components
|
||||
@ -25,7 +35,7 @@ import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
|
||||
// types
|
||||
import { ICurrentUserResponse, IProject } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
|
||||
import { PROJECTS_LIST } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { NETWORK_CHOICES } from "constants/project";
|
||||
|
||||
@ -36,13 +46,14 @@ type Props = {
|
||||
};
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
name: "",
|
||||
identifier: "",
|
||||
description: "",
|
||||
network: 2,
|
||||
emoji_and_icon: getRandomEmoji(),
|
||||
cover_image:
|
||||
"https://images.unsplash.com/photo-1575116464504-9e7652fddcb3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyODUyNTV8MHwxfHNlYXJjaHwxOHx8cGxhbmV8ZW58MHx8fHwxNjgxNDY4NTY5&ixlib=rb-4.0.3&q=80&w=1080",
|
||||
description: "",
|
||||
emoji_and_icon: getRandomEmoji(),
|
||||
identifier: "",
|
||||
name: "",
|
||||
network: 2,
|
||||
project_lead: null,
|
||||
};
|
||||
|
||||
const IsGuestCondition: React.FC<{
|
||||
@ -52,6 +63,7 @@ const IsGuestCondition: React.FC<{
|
||||
|
||||
useEffect(() => {
|
||||
setIsOpen(false);
|
||||
|
||||
setToastAlert({
|
||||
title: "Error",
|
||||
type: "error",
|
||||
@ -62,31 +74,22 @@ const IsGuestCondition: React.FC<{
|
||||
return null;
|
||||
};
|
||||
|
||||
export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
const { isOpen, setIsOpen, user } = props;
|
||||
|
||||
export const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
|
||||
const [isChangeIdentifierRequired, setIsChangeIdentifierRequired] = useState(true);
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const {
|
||||
query: { workspaceSlug },
|
||||
} = useRouter();
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: myWorkspaceMembership } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
|
||||
workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug as string) : null,
|
||||
{
|
||||
shouldRetryOnError: false,
|
||||
}
|
||||
);
|
||||
const { memberDetails } = useWorkspaceMyMembership();
|
||||
const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
setError,
|
||||
control,
|
||||
watch,
|
||||
setValue,
|
||||
@ -96,8 +99,8 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
reValidateMode: "onChange",
|
||||
});
|
||||
|
||||
const projectName = watch("name") ?? "";
|
||||
const projectIdentifier = watch("identifier") ?? "";
|
||||
const projectName = watch("name");
|
||||
const projectIdentifier = watch("identifier");
|
||||
|
||||
useEffect(() => {
|
||||
if (projectName && isChangeIdentifierRequired)
|
||||
@ -120,10 +123,10 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
else payload.emoji = formData.emoji_and_icon;
|
||||
|
||||
await projectServices
|
||||
.createProject(workspaceSlug as string, payload, user)
|
||||
.createProject(workspaceSlug.toString(), payload, user)
|
||||
.then((res) => {
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
|
||||
PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
|
||||
(prevData) => [res, ...(prevData ?? [])],
|
||||
false
|
||||
);
|
||||
@ -135,28 +138,40 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
handleClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.status === 403) {
|
||||
Object.keys(err.data).map((key) =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "You don't have permission to create project.",
|
||||
});
|
||||
handleClose();
|
||||
return;
|
||||
}
|
||||
err = err.data;
|
||||
Object.keys(err).map((key) => {
|
||||
const errorMessages = err[key];
|
||||
setError(key as keyof IProject, {
|
||||
message: Array.isArray(errorMessages) ? errorMessages.join(", ") : errorMessages,
|
||||
});
|
||||
});
|
||||
message: err.data[key],
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
if (myWorkspaceMembership && isOpen) {
|
||||
if (myWorkspaceMembership.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
|
||||
}
|
||||
const options = workspaceMembers?.map((member) => ({
|
||||
value: member.member.id,
|
||||
query:
|
||||
(member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email) +
|
||||
" " +
|
||||
member.member.last_name ?? "",
|
||||
content: (
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar user={member.member} />
|
||||
{`${
|
||||
member.member.first_name && member.member.first_name !== ""
|
||||
? member.member.first_name
|
||||
: member.member.email
|
||||
} ${member.member.last_name ?? ""}`}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
|
||||
|
||||
if (memberDetails && isOpen)
|
||||
if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={React.Fragment}>
|
||||
@ -184,12 +199,12 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
|
||||
<div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
|
||||
<Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all p-3 w-full sm:w-3/5 lg:w-1/2 xl:w-2/5">
|
||||
<div className="group relative h-36 w-full rounded-lg bg-custom-background-80">
|
||||
{watch("cover_image") !== null && (
|
||||
<img
|
||||
src={watch("cover_image")!}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-lg"
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-lg"
|
||||
alt="Cover Image"
|
||||
/>
|
||||
)}
|
||||
@ -199,87 +214,85 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
<XMarkIcon className="h-5 w-5 text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 flex w-full justify-between px-6 py-5">
|
||||
<div className="absolute left-0 bottom-0 h-16 w-full bg-gradient-to-t from-black opacity-60" />
|
||||
<h3 className="z-[1] text-xl text-white">Create Project</h3>
|
||||
<div>
|
||||
<ImagePickerPopover
|
||||
label="Change Cover"
|
||||
onChange={(image) => {
|
||||
setValue("cover_image", image);
|
||||
}}
|
||||
value={watch("cover_image")}
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden group-hover:block absolute bottom-2 right-2">
|
||||
<ImagePickerPopover
|
||||
label="Change Cover"
|
||||
onChange={(image) => {
|
||||
setValue("cover_image", image);
|
||||
}}
|
||||
value={watch("cover_image")}
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute -bottom-[22px] left-3">
|
||||
<Controller
|
||||
name="emoji_and_icon"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={
|
||||
<div className="h-[44px] w-[44px] grid place-items-center rounded-md bg-custom-background-80 outline-none text-lg">
|
||||
{value ? (
|
||||
typeof value === "object" ? (
|
||||
<span
|
||||
style={{ color: value.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{value.name}
|
||||
</span>
|
||||
) : (
|
||||
renderEmoji(value)
|
||||
)
|
||||
) : (
|
||||
"Icon"
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="mt-5 space-y-4 px-4 py-3">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div>
|
||||
<Controller
|
||||
name="emoji_and_icon"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={
|
||||
value ? (
|
||||
typeof value === "object" ? (
|
||||
<span
|
||||
style={{ color: value.color }}
|
||||
className="material-symbols-rounded text-lg"
|
||||
>
|
||||
{value.name}
|
||||
</span>
|
||||
) : (
|
||||
renderEmoji(value)
|
||||
)
|
||||
) : (
|
||||
"Icon"
|
||||
)
|
||||
}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 flex-grow">
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="divide-y-[0.5px] divide-custom-border-100 px-3"
|
||||
>
|
||||
<div className="mt-9 space-y-6 pb-5">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
|
||||
<div className="md:col-span-3">
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
type="name"
|
||||
placeholder="Enter name"
|
||||
placeholder="Project Title"
|
||||
error={errors.name}
|
||||
register={register}
|
||||
className="text-xl"
|
||||
validations={{
|
||||
required: "Name is required",
|
||||
required: "Title is required",
|
||||
maxLength: {
|
||||
value: 255,
|
||||
message: "Name should be less than 255 characters",
|
||||
message: "Title should be less than 255 characters",
|
||||
},
|
||||
}}
|
||||
autoComplete="off"
|
||||
tabIndex={1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
<div className="col-span-3">
|
||||
<div>
|
||||
<Input
|
||||
id="identifier"
|
||||
name="identifier"
|
||||
type="text"
|
||||
className="text-sm"
|
||||
placeholder="Enter Project Identifier"
|
||||
placeholder="Identifier"
|
||||
error={errors.identifier}
|
||||
register={register}
|
||||
onChange={() => setIsChangeIdentifierRequired(false)}
|
||||
validations={{
|
||||
required: "Identifier is required",
|
||||
validate: (value) =>
|
||||
/^[A-Z]+$/.test(value) || "Identifier must be uppercase text.",
|
||||
/^[A-Z]+$/.test(value) || "Identifier must be in uppercase.",
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Identifier must at least be of 1 character",
|
||||
@ -291,47 +304,110 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={
|
||||
Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
|
||||
? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
|
||||
: "Select network"
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
<div className="md:col-span-4">
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
className="text-sm !h-[8rem]"
|
||||
placeholder="Description..."
|
||||
error={errors.description}
|
||||
register={register}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
className="text-sm"
|
||||
placeholder="Enter description"
|
||||
error={errors.description}
|
||||
register={register}
|
||||
/>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="flex-shrink-0">
|
||||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={
|
||||
<div className="flex items-center gap-2 -mb-0.5 py-1">
|
||||
{currentNetwork ? (
|
||||
<>
|
||||
<Icon iconName={currentNetwork?.icon} className="!text-xs" />
|
||||
{currentNetwork.label}
|
||||
</>
|
||||
) : (
|
||||
<span className="text-custom-text-400">Select Network</span>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
noChevron
|
||||
>
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option
|
||||
key={network.key}
|
||||
value={network.key}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
<Icon iconName={network.icon} className="!text-xs" />
|
||||
{network.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Controller
|
||||
name="project_lead"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => {
|
||||
const selectedMember = workspaceMembers?.find(
|
||||
(m) => m.member.id === value
|
||||
);
|
||||
|
||||
return (
|
||||
<CustomSearchSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 py-[1px]">
|
||||
{value ? (
|
||||
<>
|
||||
<Avatar user={selectedMember?.member} />
|
||||
<span>
|
||||
{selectedMember?.member.first_name}{" "}
|
||||
{selectedMember?.member.last_name}
|
||||
</span>
|
||||
<span onClick={() => onChange(null)}>
|
||||
<Icon
|
||||
iconName="close"
|
||||
className="!text-xs -mb-0.5 text-custom-text-200 hover:text-custom-text-100"
|
||||
/>
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Icon
|
||||
iconName="group"
|
||||
className="!text-sm text-custom-text-400"
|
||||
/>
|
||||
<span className="text-custom-text-400">Lead</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
verticalPosition="top"
|
||||
noChevron
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 flex justify-end gap-2 border-t-2 border-custom-border-200 px-4 py-3">
|
||||
<div className="flex justify-end gap-2 pt-5">
|
||||
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
|
||||
<PrimaryButton type="submit" size="sm" loading={isSubmitting}>
|
||||
{isSubmitting ? "Adding project..." : "Add Project"}
|
||||
{isSubmitting ? "Creating..." : "Create Project"}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -58,6 +58,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
|
||||
|
||||
const handleClose = () => {
|
||||
setIsDeleteLoading(false);
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
setConfirmProjectName("");
|
||||
setConfirmDeleteMyProject(false);
|
||||
@ -71,20 +72,27 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
|
||||
|
||||
setIsDeleteLoading(true);
|
||||
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
|
||||
(prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
|
||||
false
|
||||
);
|
||||
|
||||
await projectService
|
||||
.deleteProject(workspaceSlug as string, data.id, user)
|
||||
.then(() => {
|
||||
handleClose();
|
||||
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
|
||||
(prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
|
||||
false
|
||||
);
|
||||
|
||||
if (onSuccess) onSuccess();
|
||||
})
|
||||
.catch(() => setIsDeleteLoading(false));
|
||||
.catch(() =>
|
||||
setToastAlert({
|
||||
type: "error",
|
||||
title: "Error!",
|
||||
message: "Something went wrong. Please try again later.",
|
||||
})
|
||||
)
|
||||
.finally(() => setIsDeleteLoading(false));
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -138,7 +138,7 @@ export const SingleProjectCard: React.FC<ProjectCardProps> = ({
|
||||
alt={project.name}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
|
||||
/>
|
||||
<div className="absolute left-7 bottom-4 flex items-center gap-3 text-white">
|
||||
<div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
|
||||
{!hasJoined ? (
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@ -10,17 +10,21 @@ import { DropdownProps } from "./types";
|
||||
|
||||
export type CustomSearchSelectProps = DropdownProps & {
|
||||
footerOption?: JSX.Element;
|
||||
multiple?: boolean;
|
||||
value: any;
|
||||
onChange: any;
|
||||
options:
|
||||
| {
|
||||
value: any;
|
||||
query: string;
|
||||
content: JSX.Element;
|
||||
content: React.ReactNode;
|
||||
}[]
|
||||
| undefined;
|
||||
};
|
||||
} & (
|
||||
| { multiple?: false; value: any } // if multiple is false, value can be anything
|
||||
| {
|
||||
multiple?: true;
|
||||
value: any[]; // if multiple is true, value should be an array
|
||||
}
|
||||
);
|
||||
|
||||
export const CustomSearchSelect = ({
|
||||
buttonClassName = "",
|
||||
@ -103,7 +107,7 @@ export const CustomSearchSelect = ({
|
||||
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-custom-text-200" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Type to search..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
|
||||
@ -89,7 +89,7 @@ const CustomSelect = ({
|
||||
);
|
||||
|
||||
type OptionProps = {
|
||||
children: string | JSX.Element;
|
||||
children: React.ReactNode;
|
||||
value: any;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
@ -4,7 +4,7 @@ import React, { useState, useRef, useEffect } from "react";
|
||||
import { Props } from "./types";
|
||||
|
||||
// Updates the height of a <textarea> when the value changes.
|
||||
const useAutosizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
|
||||
const useAutoSizeTextArea = (textAreaRef: HTMLTextAreaElement | null, value: any) => {
|
||||
useEffect(() => {
|
||||
if (textAreaRef) {
|
||||
// We need to reset the height momentarily to get the correct scrollHeight for the textarea
|
||||
@ -40,7 +40,7 @@ export const TextArea: React.FC<Props> = ({
|
||||
|
||||
const textAreaRef = useRef<any>(null);
|
||||
|
||||
useAutosizeTextArea(textAreaRef.current, textareaValue);
|
||||
useAutoSizeTextArea(textAreaRef.current, textareaValue);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
|
||||
export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
|
||||
{
|
||||
key: 0,
|
||||
label: "Private",
|
||||
icon: "lock",
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
label: "Public",
|
||||
icon: "public",
|
||||
},
|
||||
];
|
||||
|
||||
export const GROUP_CHOICES = {
|
||||
backlog: "Backlog",
|
||||
|
||||
@ -6,7 +6,7 @@ import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// hooks
|
||||
import useUser from "./use-user";
|
||||
|
||||
const useWorkspaceMembers = (workspaceSlug?: string) => {
|
||||
const useWorkspaceMembers = (workspaceSlug: string) => {
|
||||
const { user } = useUser();
|
||||
|
||||
const { data: workspaceMembers, error: workspaceMemberErrors } = useSWR(
|
||||
|
||||
@ -19,7 +19,7 @@ import { SettingsHeader } from "components/project";
|
||||
import { CustomSelect, Loader, SecondaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import { IProject, IWorkspace } from "types";
|
||||
import { IProject, IUserLite, IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
@ -93,7 +93,7 @@ const ControlSettings: NextPage = () => {
|
||||
reset({
|
||||
...projectDetails,
|
||||
default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
|
||||
project_lead: projectDetails.project_lead?.id ?? projectDetails.project_lead,
|
||||
project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
|
||||
workspace: (projectDetails.workspace as IWorkspace).id,
|
||||
});
|
||||
}, [projectDetails, reset]);
|
||||
|
||||
@ -145,6 +145,8 @@ const GeneralSettings: NextPage = () => {
|
||||
else await updateProject(payload);
|
||||
};
|
||||
|
||||
const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
|
||||
|
||||
return (
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
@ -336,16 +338,12 @@ const GeneralSettings: NextPage = () => {
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={
|
||||
Object.keys(NETWORK_CHOICES).find((k) => k === value.toString())
|
||||
? NETWORK_CHOICES[value.toString() as keyof typeof NETWORK_CHOICES]
|
||||
: "Select network"
|
||||
}
|
||||
label={currentNetwork?.label ?? "Select network"}
|
||||
input
|
||||
>
|
||||
{Object.keys(NETWORK_CHOICES).map((key) => (
|
||||
<CustomSelect.Option key={key} value={parseInt(key)}>
|
||||
{NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES]}
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option key={network.key} value={network.key}>
|
||||
{network.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
|
||||
2
apps/app/types/projects.d.ts
vendored
2
apps/app/types/projects.d.ts
vendored
@ -44,7 +44,7 @@ export interface IProject {
|
||||
name: string;
|
||||
network: number;
|
||||
page_view: boolean;
|
||||
project_lead: IUser | string | null;
|
||||
project_lead: IUserLite | string | null;
|
||||
slug: string;
|
||||
total_cycles: number;
|
||||
total_members: number;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user