mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Command bar is broken (#1617)

Browse Source 
* Update CommandMenu.tsx

* remove broken states

* convert to array

* convert filter conditions

* empty condition

* finally

* update the logic

* add test

* lint

* move file
This commit is contained in:
Rishi Raj Jain
2023-09-21 23:48:44 +05:30
committed by GitHub
parent 9ab412116d
commit b5b46f923a
3 changed files with 538 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@ import { getLogoUrlFromDomainName } from '~/utils';
import { useCommandMenu } from '../hooks/useCommandMenu';
import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
import { CommandType } from '../types/Command';
import { Command, CommandType } from '../types/Command';
import { CommandMenuItem } from './CommandMenuItem';
import {
@ -65,6 +65,7 @@ export const CommandMenu = () => {
limit: 3,
},
});
const companies = companyData?.searchResults ?? [];
const { data: activityData } = useSearchActivityQuery({
@ -78,18 +79,38 @@ export const CommandMenu = () => {
limit: 3,
},
});
const activities = activityData?.searchResults ?? [];
const matchingNavigateCommand = commandMenuCommands.find(
const checkInShortcuts = (cmd: Command, search: string) => {
if (cmd.shortcuts && cmd.shortcuts.length > 0) {
return cmd.shortcuts
.join('')
.toLowerCase()
.includes(search.toLowerCase());
}
return false;
};
const checkInLabels = (cmd: Command, search: string) => {
if (cmd.label) {
return cmd.label.toLowerCase().includes(search.toLowerCase());
}
return false;
};
const matchingNavigateCommand = commandMenuCommands.filter(
(cmd) =>
cmd.shortcuts?.join('') === search?.toUpperCase() &&
cmd.type === CommandType.Navigate,
(search.length > 0
? checkInShortcuts(cmd, search) || checkInLabels(cmd, search)
: true) && cmd.type === CommandType.Navigate,
);
const matchingCreateCommand = commandMenuCommands.find(
const matchingCreateCommand = commandMenuCommands.filter(
(cmd) =>
cmd.shortcuts?.join('') === search?.toUpperCase() &&
cmd.type === CommandType.Create,
(search.length > 0
? checkInShortcuts(cmd, search) || checkInLabels(cmd, search)
: true) && cmd.type === CommandType.Create,
);
return (
@ -100,122 +121,96 @@ export const CommandMenu = () => {
closeCommandMenu();
}
}}
label="Global Command Menu"
shouldFilter={false}
label="Global Command Menu"
>
<StyledInput
placeholder="Search"
value={search}
placeholder="Search"
onValueChange={setSearch}
/>
<StyledList>
<StyledEmpty>No results found.</StyledEmpty>
{!matchingCreateCommand && (
{matchingCreateCommand.length < 1 &&
matchingNavigateCommand.length < 1 &&
people.length < 1 &&
companies.length < 1 &&
activities.length < 1 && <StyledEmpty>No results found.</StyledEmpty>}
{matchingCreateCommand.length > 0 && (
<StyledGroup heading="Create">
{commandMenuCommands
.filter((cmd) => cmd.type === CommandType.Create)
.map((cmd) => (
<CommandMenuItem
key={cmd.label}
to={cmd.to}
label={cmd.label}
Icon={cmd.Icon}
shortcuts={cmd.shortcuts || []}
onClick={cmd.onCommandClick}
/>
))}
{matchingCreateCommand.map((cmd) => (
<CommandMenuItem
to={cmd.to}
key={cmd.label}
Icon={cmd.Icon}
label={cmd.label}
onClick={cmd.onCommandClick}
shortcuts={cmd.shortcuts || []}
/>
))}
</StyledGroup>
)}
{matchingCreateCommand && (
<StyledGroup heading="Create">
<CommandMenuItem
key={matchingCreateCommand.label}
to={matchingCreateCommand.to}
label={matchingCreateCommand.label}
Icon={matchingCreateCommand.Icon}
shortcuts={matchingCreateCommand.shortcuts || []}
onClick={matchingCreateCommand.onCommandClick}
/>
</StyledGroup>
)}
{matchingNavigateCommand && (
{matchingNavigateCommand.length > 0 && (
<StyledGroup heading="Navigate">
<CommandMenuItem
to={matchingNavigateCommand.to}
label={matchingNavigateCommand.label}
shortcuts={matchingNavigateCommand.shortcuts}
key={matchingNavigateCommand.label}
/>
{matchingNavigateCommand.map((cmd) => (
<CommandMenuItem
to={cmd.to}
key={cmd.label}
label={cmd.label}
onClick={cmd.onCommandClick}
shortcuts={cmd.shortcuts || []}
/>
))}
</StyledGroup>
)}
{!!people.length && (
{people.length > 0 && (
<StyledGroup heading="People">
{people.map((person) => (
<CommandMenuItem
key={person.id}
to={`person/${person.id}`}
label={person.displayName}
key={person.id}
Icon={() => (
<Avatar
avatarUrl={null}
placeholder={person.displayName}
colorId={person.id}
type="rounded"
avatarUrl={null}
colorId={person.id}
placeholder={person.displayName}
/>
)}
/>
))}
</StyledGroup>
)}
{!!companies.length && (
{companies.length > 0 && (
<StyledGroup heading="Companies">
{companies.map((company) => (
<CommandMenuItem
to={`companies/${company.id}`}
label={company.name}
key={company.id}
label={company.name}
to={`companies/${company.id}`}
Icon={() => (
<Avatar
avatarUrl={getLogoUrlFromDomainName(company.domainName)}
colorId={company.id}
placeholder={company.name}
avatarUrl={getLogoUrlFromDomainName(company.domainName)}
/>
)}
/>
))}
</StyledGroup>
)}
{!!activities.length && (
{activities.length > 0 && (
<StyledGroup heading="Notes">
{activities.map((activity) => (
<CommandMenuItem
onClick={() => openActivityRightDrawer(activity.id)}
label={activity.title ?? ''}
key={activity.id}
Icon={IconNotes}
key={activity.id}
label={activity.title ?? ''}
onClick={() => openActivityRightDrawer(activity.id)}
/>
))}
</StyledGroup>
)}
{!matchingNavigateCommand && (
<StyledGroup heading="Navigate">
{commandMenuCommands
.filter(
(cmd) =>
(cmd.shortcuts?.join('').includes(search?.toUpperCase()) ||
cmd.label?.toUpperCase().includes(search?.toUpperCase())) &&
cmd.type === CommandType.Navigate,
)
.map((cmd) => (
<CommandMenuItem
key={cmd.shortcuts?.join('') ?? ''}
to={cmd.to}
label={cmd.label}
shortcuts={cmd.shortcuts}
/>
))}
</StyledGroup>
)}
</StyledList>
</StyledDialog>
);