github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: add emoji to projects list (#2472)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-18 14:55:26 +05:30 committed by GitHub
parent f54a9502f8
commit b4f32ced43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 45 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/issues/select/project.tsx
View File

@ -1,7 +1,11 @@
// hooks
import useProjects from "hooks/use-projects";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// ui
import { CustomSelect } from "components/ui";
// helpers
import { renderEmoji } from "helpers/emoji.helper";
// icons
import { Clipboard } from "lucide-react";
@ -10,17 +14,39 @@ export interface IssueProjectSelectProps {
onChange: (value: string) => void;
}
export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, onChange }) => {
const { projects } = useProjects();
export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((props) => {
const { value, onChange } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
const { project: projectStore } = useMobxStore();
const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
const selectedProject = projects?.find((i) => i.id === value);
return (
<CustomSelect
value={value}
label={
<>
<Clipboard className="h-3 w-3" />
<span className="block truncate">{projects?.find((i) => i.id === value)?.identifier ?? "Project"}</span>
</>
selectedProject ? (
<div className="flex items-center gap-1.5">
<span className="grid place-items-center">
{selectedProject.emoji
? renderEmoji(selectedProject.emoji)
: selectedProject.icon_prop
? renderEmoji(selectedProject.icon_prop)
: null}
</span>
<div className="truncate">{selectedProject.identifier}</div>
</div>
) : (
<>
<Clipboard className="h-3 w-3" />
<div>Select Project</div>
</>
)
}
onChange={(val: string) => onChange(val)}
noChevron
@ -29,7 +55,16 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, o
projects.length > 0 ? (
projects.map((project) => (
<CustomSelect.Option key={project.id} value={project.id}>
<>{project.name}</>
<div className="flex items-center gap-1.5">
<span className="grid place-items-center">
{project.emoji
? renderEmoji(project.emoji)
: project.icon_prop
? renderEmoji(project.icon_prop)
: null}
</span>
<>{project.name}</>
</div>
</CustomSelect.Option>
))
) : (
@ -40,4 +75,4 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({ value, o
)}
</CustomSelect>
);
};
});