Kamran Ahmed
2 years ago
committed by
GitHub
commit
7f5f96a6b7
17 changed files with 476 additions and 130 deletions
@ -0,0 +1,47 @@ |
|||||||
|
import ChevronDownIcon from '../../icons/chevron-down.svg'; |
||||||
|
|
||||||
|
type NotDropdownProps = { |
||||||
|
onClick: () => void; |
||||||
|
selectedCount: number; |
||||||
|
singularName: string; |
||||||
|
pluralName: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function NotDropdown(props: NotDropdownProps) { |
||||||
|
const { onClick, selectedCount, singularName, pluralName } = props; |
||||||
|
|
||||||
|
const singularOrPlural = selectedCount === 1 ? singularName : pluralName; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50" |
||||||
|
role="button" |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{selectedCount > 0 && ( |
||||||
|
<div className="flex flex-col"> |
||||||
|
<p className="mb-1.5 text-base font-medium text-gray-800"> |
||||||
|
{selectedCount} {singularOrPlural} selected |
||||||
|
</p> |
||||||
|
<p className="text-sm text-gray-400"> |
||||||
|
Click to add or change selection |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{selectedCount === 0 && ( |
||||||
|
<div className="flex flex-col"> |
||||||
|
<p className="text-base text-gray-400"> |
||||||
|
Click to select {pluralName} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
<img |
||||||
|
alt={singularName} |
||||||
|
src={ChevronDownIcon} |
||||||
|
className={'relative top-[1px] h-[17px] w-[17px] opacity-40'} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
import { useEffect, useRef, useState } from 'preact/hooks'; |
||||||
|
import { useKeydown } from '../../hooks/use-keydown'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import type { PageType } from '../CommandMenu/CommandMenu'; |
||||||
|
import type { TeamResourceConfig } from './RoadmapSelector'; |
||||||
|
import CloseIcon from '../../icons/close.svg'; |
||||||
|
import { SelectRoadmapModalItem } from './SelectRoadmapModalItem'; |
||||||
|
|
||||||
|
export type SelectRoadmapModalProps = { |
||||||
|
teamId: string; |
||||||
|
allRoadmaps: PageType[]; |
||||||
|
onClose: () => void; |
||||||
|
teamResourceConfig: TeamResourceConfig; |
||||||
|
onRoadmapAdd: (roadmapId: string) => void; |
||||||
|
onRoadmapRemove: (roadmapId: string) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SelectRoadmapModal(props: SelectRoadmapModalProps) { |
||||||
|
const { |
||||||
|
onClose, |
||||||
|
allRoadmaps, |
||||||
|
onRoadmapAdd, |
||||||
|
onRoadmapRemove, |
||||||
|
teamResourceConfig, |
||||||
|
} = props; |
||||||
|
const popupBodyEl = useRef<HTMLDivElement>(null); |
||||||
|
const searchInputEl = useRef<HTMLInputElement>(null); |
||||||
|
|
||||||
|
const [searchResults, setSearchResults] = useState<PageType[]>(allRoadmaps); |
||||||
|
const [searchText, setSearchText] = useState(''); |
||||||
|
|
||||||
|
useKeydown('Escape', () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
useOutsideClick(popupBodyEl, () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!searchInputEl.current) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
searchInputEl.current.focus(); |
||||||
|
}, [searchInputEl]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (searchText.length === 0) { |
||||||
|
setSearchResults(allRoadmaps); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const searchResults = allRoadmaps.filter((roadmap) => { |
||||||
|
return ( |
||||||
|
roadmap.title.toLowerCase().includes(searchText.toLowerCase()) || |
||||||
|
roadmap.id.toLowerCase().includes(searchText.toLowerCase()) |
||||||
|
); |
||||||
|
}); |
||||||
|
setSearchResults(searchResults); |
||||||
|
}, [searchText, allRoadmaps]); |
||||||
|
|
||||||
|
const roleBasedRoadmaps = searchResults.filter((roadmap) => |
||||||
|
roadmap?.metadata?.tags?.includes('role-roadmap') |
||||||
|
); |
||||||
|
const skillBasedRoadmaps = searchResults.filter((roadmap) => |
||||||
|
roadmap?.metadata?.tags?.includes('skill-roadmap') |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div class="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"> |
||||||
|
<div class="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto"> |
||||||
|
<div |
||||||
|
ref={popupBodyEl} |
||||||
|
class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow" |
||||||
|
> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<img alt={'close'} src={CloseIcon} className="h-4 w-4" /> |
||||||
|
<span class="sr-only">Close modal</span> |
||||||
|
</button> |
||||||
|
<input |
||||||
|
ref={searchInputEl} |
||||||
|
type="text" |
||||||
|
placeholder="Search roadmaps" |
||||||
|
className="block w-full border-b px-5 pb-3.5 pt-4 outline-none placeholder:text-gray-400" |
||||||
|
value={searchText} |
||||||
|
onInput={(e) => setSearchText((e.target as HTMLInputElement).value)} |
||||||
|
/> |
||||||
|
<div className="min-h-[200px] p-4"> |
||||||
|
<span className="block pb-3 text-xs uppercase text-gray-400"> |
||||||
|
Role Based Roadmaps |
||||||
|
</span> |
||||||
|
{roleBasedRoadmaps.length === 0 && ( |
||||||
|
<p className="mb-1 flex h-full items-start text-sm italic text-gray-400"></p> |
||||||
|
)} |
||||||
|
{roleBasedRoadmaps.length > 0 && ( |
||||||
|
<div className="mb-5 flex flex-wrap items-center gap-2"> |
||||||
|
{roleBasedRoadmaps.map((roadmap) => { |
||||||
|
const isSelected = !!teamResourceConfig.find( |
||||||
|
(r) => r.resourceId === roadmap.id |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<SelectRoadmapModalItem |
||||||
|
title={roadmap.title} |
||||||
|
isSelected={isSelected} |
||||||
|
onClick={() => { |
||||||
|
if (isSelected) { |
||||||
|
onRoadmapRemove(roadmap.id); |
||||||
|
} else { |
||||||
|
onRoadmapAdd(roadmap.id); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
<span className="block pb-3 text-xs uppercase text-gray-400"> |
||||||
|
Skill Based Roadmaps |
||||||
|
</span> |
||||||
|
<div className="flex flex-wrap items-center gap-2"> |
||||||
|
{skillBasedRoadmaps.map((roadmap) => { |
||||||
|
const isSelected = !!teamResourceConfig.find( |
||||||
|
(r) => r.resourceId === roadmap.id |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<SelectRoadmapModalItem |
||||||
|
title={roadmap.title} |
||||||
|
isSelected={isSelected} |
||||||
|
onClick={() => { |
||||||
|
if (isSelected) { |
||||||
|
onRoadmapRemove(roadmap.id); |
||||||
|
} else { |
||||||
|
onRoadmapAdd(roadmap.id); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import type { SelectRoadmapModalProps } from './SelectRoadmapModal'; |
||||||
|
|
||||||
|
type SelectRoadmapModalItemProps = { |
||||||
|
title: string; |
||||||
|
isSelected: boolean; |
||||||
|
onClick: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SelectRoadmapModalItem(props: SelectRoadmapModalItemProps) { |
||||||
|
const { isSelected, onClick, title } = props; |
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={`group flex min-h-[35px] items-stretch overflow-hidden rounded-md text-sm ${ |
||||||
|
!isSelected |
||||||
|
? 'border border-gray-300 hover:bg-gray-100' |
||||||
|
: 'bg-black text-white transition-colors hover:bg-gray-700' |
||||||
|
}`}
|
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
<span className="flex items-center px-3">{title}</span> |
||||||
|
{isSelected && ( |
||||||
|
<span className="flex items-center bg-gray-700 px-3 text-xs text-white transition-colors"> |
||||||
|
× |
||||||
|
</span> |
||||||
|
)} |
||||||
|
|
||||||
|
{!isSelected && ( |
||||||
|
<span className="flex items-center bg-gray-100 px-2.5 text-xs text-gray-500"> |
||||||
|
+ |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue