admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: search activities (#972)

Browse Source
This commit is contained in:
Jérémy M
2023-07-28 19:02:56 +02:00
committed by GitHub
parent 2304823dc6
commit 3daebd0e0c
4 changed files with 142 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -107,7 +107,7 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
},
});
const openCreateCommandThread = useOpenCreateActivityDrawer();
const openCreateActivity = useOpenCreateActivityDrawer();
const activities: ActivityForDrawer[] = queryResult?.findManyActivities ?? [];
@ -121,8 +121,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
<StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
<StyledEmptyTimelineSubTitle>Create one:</StyledEmptyTimelineSubTitle>
<ActivityCreateButton
onNoteClick={() => openCreateCommandThread(entity, ActivityType.Note)}
onTaskClick={() => openCreateCommandThread(entity, ActivityType.Task)}
onNoteClick={() => openCreateActivity(entity, ActivityType.Note)}
onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
/>
</StyledTimelineEmptyContainer>
);
@ -132,8 +132,8 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
<StyledMainContainer>
<StyledTopActionBar>
<ActivityCreateButton
onNoteClick={() => openCreateCommandThread(entity, ActivityType.Note)}
onTaskClick={() => openCreateCommandThread(entity, ActivityType.Task)}
onNoteClick={() => openCreateActivity(entity, ActivityType.Note)}
onTaskClick={() => openCreateActivity(entity, ActivityType.Task)}
/>
</StyledTopActionBar>
<StyledTimelineContainer>

81
front/src/modules/command-menu/components/CommandMenu.tsx
View File

@ -1,11 +1,18 @@
import { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { useFilteredSearchCompanyQuery } from '@/companies/queries';
import { useFilteredSearchPeopleQuery } from '@/people/queries';
import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
import { AppHotkeyScope } from '@/ui/hotkey/types/AppHotkeyScope';
import { IconNotes } from '@/ui/icon';
import { Avatar } from '@/users/components/Avatar';
import {
QueryMode,
useSearchActivityQuery,
useSearchCompanyQuery,
useSearchPeopleQuery,
} from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
import { useCommandMenu } from '../hooks/useCommandMenu';
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
@ -21,6 +28,7 @@ import {
export function CommandMenu() {
const { openCommandMenu, closeCommandMenu } = useCommandMenu();
const openActivityRightDrawer = useOpenActivityRightDrawer();
const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
const [search, setSearch] = useState('');
@ -33,16 +41,41 @@ export function CommandMenu() {
[openCommandMenu],
);
const people = useFilteredSearchPeopleQuery({
searchFilter: search,
selectedIds: [],
limit: 3,
const { data: peopleData } = useSearchPeopleQuery({
variables: {
where: {
OR: [
{ firstName: { contains: search, mode: QueryMode.Insensitive } },
{ lastName: { contains: search, mode: QueryMode.Insensitive } },
],
},
limit: 3,
},
});
const companies = useFilteredSearchCompanyQuery({
searchFilter: search,
selectedIds: [],
limit: 3,
const people = peopleData?.searchResults ?? [];
const { data: companyData } = useSearchCompanyQuery({
variables: {
where: {
OR: [{ name: { contains: search, mode: QueryMode.Insensitive } }],
},
limit: 3,
},
});
const companies = companyData?.searchResults ?? [];
const { data: activityData } = useSearchActivityQuery({
variables: {
where: {
OR: [
{ title: { contains: search, mode: QueryMode.Insensitive } },
{ body: { contains: search, mode: QueryMode.Insensitive } },
],
},
limit: 3,
},
});
const activities = activityData?.searchResults ?? [];
/*
TODO: Allow performing actions on page through CommandBar
@ -99,35 +132,35 @@ export function CommandMenu() {
/>
<StyledList>
<StyledEmpty>No results found.</StyledEmpty>
{!!people.entitiesToSelect.length && (
{!!people.length && (
<StyledGroup heading="People">
{people.entitiesToSelect.map((person) => (
{people.map((person) => (
<CommandMenuItem
to={`person/${person.id}`}
label={person.name}
label={person.displayName}
key={person.id}
icon={
<Avatar
avatarUrl={person.avatarUrl}
avatarUrl={null}
size="sm"
colorId={person.id}
placeholder={person.name}
placeholder={person.displayName}
/>
}
/>
))}
</StyledGroup>
)}
{!!companies.entitiesToSelect.length && (
{!!companies.length && (
<StyledGroup heading="Companies">
{companies.entitiesToSelect.map((company) => (
{companies.map((company) => (
<CommandMenuItem
to={`companies/${company.id}`}
label={company.name}
key={company.id}
icon={
<Avatar
avatarUrl={company.avatarUrl}
avatarUrl={getLogoUrlFromDomainName(company.domainName)}
size="sm"
colorId={company.id}
placeholder={company.name}
@ -137,6 +170,18 @@ export function CommandMenu() {
))}
</StyledGroup>
)}
{!!activities.length && (
<StyledGroup heading="Notes">
{activities.map((activity) => (
<CommandMenuItem
onClick={() => openActivityRightDrawer(activity.id)}
label={activity.title ?? ''}
key={activity.id}
icon={<IconNotes />}
/>
))}
</StyledGroup>
)}
<StyledGroup heading="Navigate">
<CommandMenuItem
to="/people"

20
front/src/modules/search/queries/search.ts
View File

@ -17,6 +17,8 @@ export const SEARCH_PEOPLE_QUERY = gql`
city
firstName
lastName
displayName
avatarUrl
createdAt
}
}
@ -68,3 +70,21 @@ export const SEARCH_COMPANY_QUERY = gql`
}
}
`;
export const SEARCH_ACTIVITY_QUERY = gql`
query SearchActivity(
$where: ActivityWhereInput
$limit: Int
$orderBy: [ActivityOrderByWithRelationInput!]
) {
searchResults: findManyActivities(
where: $where
take: $limit
orderBy: $orderBy
) {
id
title
body
}
}
`;