From cc498096f37af44fe0156aca38f6014187fbeb40 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Tue, 7 Mar 2023 22:56:22 +0530 Subject: [PATCH] chore: update module dropdowns (#396) --- .../components/issues/comment/add-comment.tsx | 2 +- apps/app/components/modules/form.tsx | 16 +++- apps/app/components/modules/modal.tsx | 1 + .../components/modules/select/select-lead.tsx | 77 ++++++++++++------- .../modules/select/select-members.tsx | 75 +++++++++++------- .../components/modules/single-module-card.tsx | 4 +- .../app/components/rich-text-editor/index.tsx | 8 +- 7 files changed, 117 insertions(+), 66 deletions(-) diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx index b379b5ce1..426a222ac 100644 --- a/apps/app/components/issues/comment/add-comment.tsx +++ b/apps/app/components/issues/comment/add-comment.tsx @@ -96,7 +96,7 @@ export const AddComment: React.FC = () => { setValue("comment_json", jsonValue); setValue("comment_html", htmlValue); }} - placeholder="Enter Your comment..." + // placeholder="Enter Your comment..." /> )} /> diff --git a/apps/app/components/modules/form.tsx b/apps/app/components/modules/form.tsx index 35a141451..936424e01 100644 --- a/apps/app/components/modules/form.tsx +++ b/apps/app/components/modules/form.tsx @@ -114,8 +114,20 @@ export const ModuleForm: React.FC = ({ handleFormSubmit, handleClose, sta
- - + ( + + )} + /> + ( + + )} + />
diff --git a/apps/app/components/modules/modal.tsx b/apps/app/components/modules/modal.tsx index fcbd3f531..b611f415b 100644 --- a/apps/app/components/modules/modal.tsx +++ b/apps/app/components/modules/modal.tsx @@ -106,6 +106,7 @@ export const CreateUpdateModuleModal: React.FC = ({ isOpen, setIsOpen, da const payload: Partial = { ...formData, + members_list: formData.members, }; if (!data) await createModule(payload); diff --git a/apps/app/components/modules/select/select-lead.tsx b/apps/app/components/modules/select/select-lead.tsx index e89add487..0d0e1ace1 100644 --- a/apps/app/components/modules/select/select-lead.tsx +++ b/apps/app/components/modules/select/select-lead.tsx @@ -1,57 +1,78 @@ import React from "react"; import { useRouter } from "next/router"; +import Image from "next/image"; import useSWR from "swr"; -// react-hook-form -import { Controller, Control } from "react-hook-form"; // services import projectServices from "services/project.service"; // ui -import SearchListbox from "components/search-listbox"; +import { Avatar, CustomSearchSelect } from "components/ui"; // icons -import { UserIcon } from "@heroicons/react/24/outline"; -// types -import type { IModule } from "types"; +import User from "public/user.png"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; type Props = { - control: Control; + value: string | null; + onChange: () => void; }; -export const ModuleLeadSelect: React.FC = ({ control }) => { +export const ModuleLeadSelect: React.FC = ({ value, onChange }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { data: people } = useSWR( + const { data: members } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string) : null ); + const options = + members?.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: ( +
+ + {member.member.first_name && member.member.first_name !== "" + ? member.member.first_name + : member.member.email} +
+ ), + })) ?? []; + + const selectedOption = members?.find((m) => m.member.id === value)?.member; + return ( - ( - ({ - value: person.member.id, - display: - person.member.first_name && person.member.first_name !== "" - ? person.member.first_name - : person.member.email, - }))} - value={value} - onChange={onChange} - icon={} - /> - )} + + {selectedOption ? ( + + ) : ( +
+ No user +
+ )} + {selectedOption + ? selectedOption?.first_name && selectedOption.first_name !== "" + ? selectedOption?.first_name + : selectedOption?.email + : "N/A"} + + } + onChange={onChange} + noChevron /> ); }; diff --git a/apps/app/components/modules/select/select-members.tsx b/apps/app/components/modules/select/select-members.tsx index 9ad8b532f..439753a91 100644 --- a/apps/app/components/modules/select/select-members.tsx +++ b/apps/app/components/modules/select/select-members.tsx @@ -4,55 +4,72 @@ import { useRouter } from "next/router"; import useSWR from "swr"; -// react-hook-form -import { Controller, Control } from "react-hook-form"; // services import projectServices from "services/project.service"; // ui -import SearchListbox from "components/search-listbox"; +import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui"; // icons -import { UserIcon } from "@heroicons/react/24/outline"; -// types -import type { IModule } from "types"; +import { UserGroupIcon } from "@heroicons/react/24/outline"; // fetch-keys import { PROJECT_MEMBERS } from "constants/fetch-keys"; type Props = { - control: Control; + value: string[]; + onChange: () => void; }; -export const ModuleMembersSelect: React.FC = ({ control }) => { +export const ModuleMembersSelect: React.FC = ({ value, onChange }) => { const router = useRouter(); const { workspaceSlug, projectId } = router.query; - const { data: people } = useSWR( + const { data: members } = useSWR( workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string) : null ); + const options = + members?.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: ( +
+ + {member.member.first_name && member.member.first_name !== "" + ? member.member.first_name + : member.member.email} +
+ ), + })) ?? []; return ( - ( - ({ - value: person.member.id, - display: - person.member.first_name && person.member.first_name !== "" - ? person.member.first_name - : person.member.email, - }))} - multiple={true} - value={value} - onChange={onChange} - icon={} - /> - )} + + {value && value.length > 0 && Array.isArray(value) ? ( +
+ + {value.length} Assignees +
+ ) : ( +
+ + Assignee +
+ )} + + } + options={options} + onChange={onChange} + height="md" + multiple + noChevron /> ); }; diff --git a/apps/app/components/modules/single-module-card.tsx b/apps/app/components/modules/single-module-card.tsx index eeb2628cb..2a48baac5 100644 --- a/apps/app/components/modules/single-module-card.tsx +++ b/apps/app/components/modules/single-module-card.tsx @@ -221,8 +221,8 @@ export const SingleModuleCard: React.FC = ({ module, handleEditModule }) Members:
- {module.members_detail && module.members_detail.length > 0 ? ( - + {module.members && module.members.length > 0 ? ( + ) : (
= (props) => { manager={manager} initialContent={state} classNames={[ - `p-4 relative focus:outline-none rounded-md border border-transparent focus:border-theme ${customClassName}`, + `p-4 relative focus:outline-none rounded-md border focus:border-theme ${customClassName}`, ]} editable={editable} onBlur={() => { onBlur(jsonValue, htmlValue); }} > - {(!value || value === "" || value?.content?.[0]?.content === undefined) && ( -

+ {/* {(!value || value === "" || value?.content?.[0]?.content === undefined) && ( +

{placeholder || "Enter text..."}

- )} + )} */} {imageLoader && (