chore: update module dropdowns (#396)

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..."
               />
             )}
           />

apps/app/components/modules/form.tsx

@@ -114,8 +114,20 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
           </div>
           <div className="flex flex-wrap items-center gap-2">
             <ModuleStatusSelect control={control} error={errors.status} />
-            <ModuleLeadSelect control={control} />
-            <ModuleMembersSelect control={control} />
+            <Controller
+              control={control}
+              name="lead"
+              render={({ field: { value, onChange } }) => (
+                <ModuleLeadSelect value={value} onChange={onChange} />
+              )}
+            />
+            <Controller
+              control={control}
+              name="members"
+              render={({ field: { value, onChange } }) => (
+                <ModuleMembersSelect value={value} onChange={onChange} />
+              )}
+            />
           </div>
         </div>
       </div>

apps/app/components/modules/modal.tsx

@@ -106,6 +106,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
 
     const payload: Partial<IModule> = {
       ...formData,
+      members_list: formData.members,
     };
 
     if (!data) await createModule(payload);

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<IModule, any>;
+  value: string | null;
+  onChange: () => void;
 };
 
-export const ModuleLeadSelect: React.FC<Props> = ({ control }) => {
+export const ModuleLeadSelect: React.FC<Props> = ({ 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: (
+        <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}
+        </div>
+      ),
+    })) ?? [];
+
+  const selectedOption = members?.find((m) => m.member.id === value)?.member;
+
   return (
-    <Controller
-      control={control}
-      name="lead"
-      render={({ field: { value, onChange } }) => (
-        <SearchListbox
-          title="Lead"
-          optionsFontsize="sm"
-          options={people?.map((person) => ({
-            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={<UserIcon className="h-3 w-3 text-gray-500" />}
-        />
-      )}
+    <CustomSearchSelect
+      options={options}
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-gray-500">
+          {selectedOption ? (
+            <Avatar user={selectedOption} />
+          ) : (
+            <div className="h-4 w-4 rounded-full bg-white">
+              <Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
+            </div>
+          )}
+          {selectedOption
+            ? selectedOption?.first_name && selectedOption.first_name !== ""
+              ? selectedOption?.first_name
+              : selectedOption?.email
+            : "N/A"}
+        </div>
+      }
+      onChange={onChange}
+      noChevron
     />
   );
 };

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<IModule, any>;
+  value: string[];
+  onChange: () => void;
 };
 
-export const ModuleMembersSelect: React.FC<Props> = ({ control }) => {
+export const ModuleMembersSelect: React.FC<Props> = ({ 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: (
+        <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}
+        </div>
+      ),
+    })) ?? [];
 
   return (
-    <Controller
-      control={control}
-      name="members_list"
-      render={({ field: { value, onChange } }) => (
-        <SearchListbox
-          title="Members"
-          optionsFontsize="sm"
-          options={people?.map((person) => ({
-            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={<UserIcon className="h-3 w-3 text-gray-500" />}
-        />
-      )}
+    <CustomSearchSelect
+      value={value}
+      label={
+        <div className="flex items-center gap-2 text-gray-500">
+          {value && value.length > 0 && Array.isArray(value) ? (
+            <div className="flex items-center justify-center gap-2">
+              <AssigneesList userIds={value} length={3} showLength={false} />
+              <span className="text-gray-500">{value.length} Assignees</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center gap-2">
+              <UserGroupIcon className="h-4 w-4 text-gray-500" />
+              <span className="text-gray-500">Assignee</span>
+            </div>
+          )}
+        </div>
+      }
+      options={options}
+      onChange={onChange}
+      height="md"
+      multiple
+      noChevron
     />
   );
 };

apps/app/components/modules/single-module-card.tsx

@@ -221,8 +221,8 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
                   <UserGroupIcon className="h-5 w-5 text-gray-400" />
                   <span>Members:</span>
                   <div className="flex  items-center gap-1 text-xs">
-                    {module.members_detail && module.members_detail.length > 0 ? (
-                      <AssigneesList users={module.members_detail} length={3} />
+                    {module.members && module.members.length > 0 ? (
+                      <AssigneesList userIds={module.members} length={3} />
                     ) : (
                       <div className="flex items-center gap-1">
                         <Image

apps/app/components/rich-text-editor/index.tsx

@@ -184,18 +184,18 @@ const RemirrorRichTextEditor: FC<IRemirrorRichTextEditor> = (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) && (
-          <p className="pointer-events-none absolute top-[8.8rem] left-9 text-gray-300">
+        {/* {(!value || value === "" || value?.content?.[0]?.content === undefined) && (
+          <p className="pointer-events-none absolute top-[8.8rem] left-12 text-gray-300">
             {placeholder || "Enter text..."}
           </p>
-        )}
+        )} */}
         <EditorComponent />
 
         {imageLoader && (