feat: added filter 'created_by' (#524)

* feat: clear filter button

* feat: added filter 'created_by'

* style: text align left for all the issues in filters dropdown

apps/app/components/core/issues-view.tsx

@@ -418,7 +418,8 @@ export const IssuesView: React.FC<Props> = ({
         isOpen={deleteIssueModal}
         data={issueToDelete}
       />
-      <div className="mb-5 -mt-4 flex items-center justify-between gap-2">
+      <div className="mb-5 -mt-4">
+        <div className="flex items-center justify-between gap-2">
           <div className="flex flex-wrap items-center gap-3 text-xs">
             {Object.keys(filters).map((key) => {
               if (filters[key as keyof typeof filters] !== null)
@@ -430,8 +431,9 @@ export const IssuesView: React.FC<Props> = ({
                       <span>None</span>
                     ) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
                       <div className="space-x-2">
-                      {key === "state"
+                        {key === "state" ? (
-                        ? filters.state?.map((stateId: any) => {
+                          <div className="flex items-center gap-x-1">
+                            {filters.state?.map((stateId: any) => {
                               const state = states?.find((s) => s.id === stateId);
 
                               return (
@@ -467,9 +469,21 @@ export const IssuesView: React.FC<Props> = ({
                                   </span>
                                 </p>
                               );
+                            })}
+                            <button
+                              type="button"
+                              onClick={() =>
+                                setFilters({
+                                  state: null,
                                 })
-                        : key === "priority"
+                              }
-                        ? filters.priority?.map((priority: any) => (
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </button>
+                          </div>
+                        ) : key === "priority" ? (
+                          <div className="flex items-center gap-x-1">
+                            {filters.priority?.map((priority: any) => (
                               <p
                                 key={priority}
                                 className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${
@@ -502,9 +516,21 @@ export const IssuesView: React.FC<Props> = ({
                                   <XMarkIcon className="h-3 w-3" />
                                 </span>
                               </p>
-                          ))
+                            ))}
-                        : key === "assignees"
+                            <button
-                        ? filters.assignees?.map((memberId: string) => {
+                              type="button"
+                              onClick={() =>
+                                setFilters({
+                                  priority: null,
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </button>
+                          </div>
+                        ) : key === "assignees" ? (
+                          <div className="flex items-center gap-x-1">
+                            {filters.assignees?.map((memberId: string) => {
                               const member = members?.find((m) => m.member.id === memberId)?.member;
 
                               return (
@@ -531,8 +557,62 @@ export const IssuesView: React.FC<Props> = ({
                                   </span>
                                 </p>
                               );
+                            })}
+                            <button
+                              type="button"
+                              onClick={() =>
+                                setFilters({
+                                  assignees: null,
                                 })
-                        : (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")}
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </button>
+                          </div>
+                        ) : (key as keyof IIssueFilterOptions) === "created_by" ? (
+                          <div className="flex items-center gap-x-1">
+                            {filters.created_by?.map((memberId: string) => {
+                              const member = members?.find((m) => m.member.id === memberId)?.member;
+
+                              return (
+                                <p
+                                  key={memberId}
+                                  className="inline-flex items-center gap-x-1 rounded-full border px-2 py-0.5 font-medium capitalize"
+                                >
+                                  <Avatar user={member} />
+                                  <span>{member?.first_name}</span>
+                                  <span
+                                    className="cursor-pointer"
+                                    onClick={() =>
+                                      setFilters(
+                                        {
+                                          assignees: filters.created_by?.filter(
+                                            (p: any) => p !== memberId
+                                          ),
+                                        },
+                                        !Boolean(viewId)
+                                      )
+                                    }
+                                  >
+                                    <XMarkIcon className="h-3 w-3" />
+                                  </span>
+                                </p>
+                              );
+                            })}
+                            <button
+                              type="button"
+                              onClick={() =>
+                                setFilters({
+                                  created_by: null,
+                                })
+                              }
+                            >
+                              <XMarkIcon className="h-3 w-3" />
+                            </button>
+                          </div>
+                        ) : (
+                          (filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
+                        )}
                       </div>
                     ) : (
                       <span className="capitalize">{filters[key as keyof typeof filters]}</span>
@@ -542,7 +622,8 @@ export const IssuesView: React.FC<Props> = ({
             })}
           </div>
 
-        {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
+          {Object.keys(filters).length > 0 &&
+            nullFilters.length !== Object.keys(filters).length && (
               <PrimaryButton
                 onClick={() => {
                   if (viewId) {
@@ -564,6 +645,23 @@ export const IssuesView: React.FC<Props> = ({
               </PrimaryButton>
             )}
         </div>
+        {Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
+          <button
+            onClick={() =>
+              setFilters({
+                state: null,
+                priority: null,
+                assignees: null,
+                labels: null,
+              })
+            }
+            className="mt-2 flex items-center gap-x-1 text-xs"
+          >
+            <span>Clear all filters</span>
+            <XMarkIcon className="h-4 w-4" />
+          </button>
+        )}
+      </div>
       <DragDropContext onDragEnd={handleOnDragEnd}>
         <StrictModeDroppable droppableId="trashBox">
           {(provided, snapshot) => (

apps/app/components/ui/multi-level-dropdown.tsx

@@ -130,7 +130,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                             className={({ active }) =>
                               `${
                                 active || child.selected ? "bg-gray-100" : "text-gray-900"
-                              } flex w-full items-center break-all rounded px-1 py-1.5 capitalize`
+                              } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize`
                             }
                           >
                             {child.label}

apps/app/components/views/select-filters.tsx

@@ -119,6 +119,29 @@ export const SelectFilters: React.FC<Props> = ({
             })) ?? []),
           ],
         },
+        {
+          id: "created_by",
+          label: "Created By",
+          value: members,
+          children: [
+            ...(members?.map((member) => ({
+              id: member.member.id,
+              label: (
+                <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>
+              ),
+              value: {
+                key: "created_by",
+                value: member.member.id,
+              },
+              selected: filters?.created_by?.includes(member.member.id),
+            })) ?? []),
+          ],
+        },
       ]}
     />
   );

apps/app/constants/fetch-keys.ts

@@ -1,9 +1,10 @@
 const paramsToKey = (params: any) => {
-  const { state, priority, assignees } = params;
+  const { state, priority, assignees, created_by } = params;
 
   let stateKey = state ? state.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
   let assigneesKey = assignees ? assignees.split(",") : [];
+  let createdByKey = created_by ? created_by.split(",") : [];
   const type = params.type ? params.type.toUpperCase() : "NULL";
   const groupBy = params.group_by ? params.group_by.toUpperCase() : "NULL";
   const orderBy = params.order_by ? params.order_by.toUpperCase() : "NULL";
@@ -12,8 +13,9 @@ const paramsToKey = (params: any) => {
   stateKey = stateKey.sort().join("_");
   priorityKey = priorityKey.sort().join("_");
   assigneesKey = assigneesKey.sort().join("_");
+  createdByKey = createdByKey.sort().join("_");
 
-  return `${stateKey}_${priorityKey}_${assigneesKey}_${type}_${groupBy}_${orderBy}`;
+  return `${stateKey}_${priorityKey}_${assigneesKey}_${createdByKey}_${type}_${groupBy}_${orderBy}`;
 };
 
 export const CURRENT_USER = "CURRENT_USER";

apps/app/contexts/issue-view.context.tsx

@@ -69,6 +69,7 @@ export const initialState: StateType = {
     state: null,
     issue__assignees__id: null,
     issue__labels__id: null,
+    created_by: null,
   },
 };
 

apps/app/hooks/use-issues-view.tsx

@@ -59,6 +59,7 @@ const useIssuesView = () => {
     issue__labels__id: filters?.issue__labels__id
       ? filters?.issue__labels__id.join(",")
       : undefined,
+    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
   };
 
   const { data: projectIssues } = useSWR(

apps/app/types/issues.d.ts

@@ -224,6 +224,7 @@ export interface IIssueFilterOptions {
   issue__assignees__id: string[] | null;
   issue__labels__id: string[] | null;
   priority: string[] | null;
+  created_by: string[] | null;
 }
 
 export type TIssueGroupByOptions = "state" | "priority" | "labels" | "created_by" | null;