feat(inbox): filter cases by assignee MAR-1244 (#1136)

Author: ChibiBlasphem

packages/app-builder/src/components/Cases/Filters/CasesFiltersContext.tsx

@@ -31,6 +31,7 @@ export const casesFiltersSchema = z.object({
     .enum(['true', 'false'])
     .transform((val) => val === 'true')
     .optional(),
+  assignee: z.uuid().optional(),
 });
 
 export type CasesFilters = z.infer<typeof casesFiltersSchema>;
@@ -49,6 +50,7 @@ export type CasesFiltersForm = {
   name?: string;
   includeSnoozed?: boolean;
   excludeAssigned?: boolean;
+  assignee?: string;
 };
 
 const emptyCasesFilters: CasesFiltersForm = {

packages/app-builder/src/components/Cases/Filters/FilterDetail/CasesAssigneeFilter.tsx

@@ -0,0 +1,31 @@
+import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
+import { useFormContext } from 'react-hook-form';
+import * as R from 'remeda';
+import { Avatar } from 'ui-design-system';
+import { CasesFiltersForm, useCasesFiltersContext } from '../CasesFiltersContext';
+
+export function CasesAssigneeFilter() {
+  const { submitCasesFilters } = useCasesFiltersContext();
+  const { setValue } = useFormContext<CasesFiltersForm>();
+  const { orgUsers } = useOrganizationUsers();
+
+  const handleUserSelect = (userId: string) => {
+    setValue('assignee', userId);
+    submitCasesFilters();
+  };
+
+  return (
+    <div className="flex flex-col gap-2 p-v2-sm">
+      {orgUsers.map((user) => (
+        <div
+          key={user.userId}
+          className="inline-flex gap-v2-sm w-full p-v2-sm hover:bg-purple-98 cursor-pointer"
+          onClick={() => handleUserSelect(user.userId)}
+        >
+          <Avatar size="xs" firstName={user.firstName} lastName={user.lastName} />
+          <span>{`${R.capitalize(user.firstName)} ${R.capitalize(user.lastName)}`}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

packages/app-builder/src/components/Cases/Filters/FilterDetail/FilterDetail.tsx

@@ -1,6 +1,7 @@
 import { match } from 'ts-pattern';
 
 import { type CasesFilterName } from '../filters';
+import { CasesAssigneeFilter } from './CasesAssigneeFilter';
 import { CasesDateRangeFilter } from './CasesDateRangeFilter';
 import { CasesExcludeAssignedFilter } from './CasesExcludeAssignedFilter';
 import { CasesSnoozedFilter } from './CasesSnoozedFilter';
@@ -12,4 +13,5 @@ export const FilterDetail = ({ filterName }: { filterName: CasesFilterName }) =>
     .with('statuses', () => <ClosedCasesFilter />)
     .with('includeSnoozed', () => <CasesSnoozedFilter />)
     .with('excludeAssigned', () => <CasesExcludeAssignedFilter />)
+    .with('assignee', () => <CasesAssigneeFilter />)
     .exhaustive();

packages/app-builder/src/components/Cases/Filters/filters.ts

@@ -7,6 +7,7 @@ export const casesFilterNames = [
   'statuses',
   'includeSnoozed',
   'excludeAssigned',
+  'assignee',
 ] as const;
 
 export type CasesFilterName = (typeof casesFilterNames)[number];
@@ -21,6 +22,7 @@ export const getFilterIcon = (filterName: CasesFilterName) =>
     .with('statuses', () => 'checked')
     .with('includeSnoozed', () => 'snooze')
     .with('excludeAssigned', () => 'person')
+    .with('assignee', () => 'person')
     .exhaustive();
 
 export const getFilterTKey = (filterName: CasesFilterName) =>
@@ -29,4 +31,5 @@ export const getFilterTKey = (filterName: CasesFilterName) =>
     .with('statuses', () => 'cases:filter.closed_only.label')
     .with('includeSnoozed', () => 'cases:filter.include_snoozed.label')
     .with('excludeAssigned', () => 'cases:filter.exclude_assigned.label')
+    .with('assignee', () => 'cases:filter.assignee.label')
     .exhaustive();

packages/app-builder/src/locales/ar/cases.json

@@ -182,6 +182,7 @@
   "escalate-button.label": "تصاعد",
   "escalate-case.modal.callout": "عند تصعيد هذه الحالة ، لن يتم تخصيصها لها ، وسوف تفقد الوصول إذا لم تكن عضوًا في صندوق الوارد المستهدف. <br/> سيتم إعادة توجيهك إلى قائمة الحالات في صندوق الوارد الحالي.",
   "escalate-case.modal.submit-button.label": "تصاعد",
+  "filter.assignee.label": "مكلّف",
   "filter.closed_only.label": "المغلقة فقط",
   "filter.exclude_assigned.label": "غير المكلّفين فقط",
   "filter.include_snoozed.label": "تضمين المؤجّلين",

packages/app-builder/src/locales/en/cases.json

@@ -182,6 +182,7 @@
   "escalate-button.label": "Escalate",
   "escalate-case.modal.callout": "Upon escalating this case, you will no longer be assigned to it, and you will lose access if you are not a member of the target inbox.<br/>You will be redirected to the list of cases in the current inbox.",
   "escalate-case.modal.submit-button.label": "Escalate",
+  "filter.assignee.label": "Assignee",
   "filter.closed_only.label": "Closed only",
   "filter.exclude_assigned.label": "Unassigned only",
   "filter.include_snoozed.label": "Include snoozed",

packages/app-builder/src/locales/fr/cases.json

@@ -182,6 +182,7 @@
   "escalate-button.label": "Escalader",
   "escalate-case.modal.callout": "En procédant à l’escalade de ce cas, il ne vous sera plus affecté et vous n’y aurez plus accès si vous n'êtes pas membre de la boîte de réception cible.<br/>Vous serez redirigé vers la boîte de réception actuelle.",
   "escalate-case.modal.submit-button.label": "Escalader",
+  "filter.assignee.label": "Assigné",
   "filter.closed_only.label": "Investigations résolues",
   "filter.exclude_assigned.label": "Non assignés",
   "filter.include_snoozed.label": "Voir les rappels",

packages/app-builder/src/routes/_builder+/cases+/inboxes.$inboxId.tsx

@@ -60,6 +60,7 @@ export const buildQueryParams = (
             fromNow: filters.dateRange.fromNow,
           }
       : {},
+    assignee: filters.assignee,
     offsetId,
     ...(limit && { limit }),
     ...(order && { order }),
@@ -105,7 +106,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     statuses:
       (parsedQuery.data.statuses as CaseStatus[]) ??
       caseStatuses.filter((status) => status !== 'closed'),
-    ...(!inboxId && { assigneeId: user.actorIdentity.userId }),
+    ...(!inboxId
+      ? { assigneeId: user.actorIdentity.userId }
+      : { assigneeId: parsedQuery.data.assignee }),
   };
 
   try {
@@ -253,7 +256,9 @@ export default function Cases() {
                   </CaseRightPanel.Trigger>
                 </div>
               </div>
-              <CasesFiltersBar excludedFilters={!inboxId ? ['excludeAssigned'] : undefined} />
+              <CasesFiltersBar
+                excludedFilters={!inboxId ? ['excludeAssigned', 'assignee'] : undefined}
+              />
               <CasesList
                 key={inboxId}
                 cases={cases}