fix: prettier

chore/roadmaps-modal
Arik Chakma 2 years ago
parent 47e1e2196d
commit 292a17ba19
  1. 17
      src/components/CreateTeam/RoadmapSelector.tsx
  2. 89
      src/components/CreateTeam/SelectRoadmapModal.tsx

@ -58,7 +58,8 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
pageProgressMessage.set(`Deleting resource`);
const { error, response } = await httpPut<TeamResourceConfig>(
`${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${team._id
`${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${
team._id
}`,
{
resourceId: roadmapId,
@ -89,7 +90,8 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
pageProgressMessage.set(`Adding roadmap to team`);
const { error, response } = await httpPut<TeamResourceConfig>(
`${import.meta.env.PUBLIC_API_URL}/v1-update-team-resource-config/${team._id
`${import.meta.env.PUBLIC_API_URL}/v1-update-team-resource-config/${
team._id
}`,
{
teamId: team._id,
@ -138,8 +140,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
});
}}
onRoadmapRemove={(roadmapId) => {
onRemove(roadmapId).finally(() => {
});
onRemove(roadmapId).finally(() => {});
}}
/>
)}
@ -154,14 +155,10 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
</p>
<div className="mt-4 flex justify-center">
<button
className="group bg-black justify-center rounded-md px-4 py-2 flex items-center gap-2 transition-opacity hover:opacity-70"
className="group flex items-center justify-center gap-2 rounded-md bg-black px-4 py-2 transition-opacity hover:opacity-70"
onClick={() => setShowSelectRoadmapModal(true)}
>
<img
alt="add"
src={PlusWhiteIcon}
className="h-5 w-5"
/>
<img alt="add" src={PlusWhiteIcon} className="h-5 w-5" />
<span className="text-sm text-white focus:outline-none">
Add Roadmaps
</span>

@ -10,13 +10,19 @@ export type SelectRoadmapModalProps = {
teamId: string;
allRoadmaps: PageType[];
onClose: () => void;
teamResourceConfig: TeamResourceConfig
teamResourceConfig: TeamResourceConfig;
onRoadmapAdd: (roadmapId: string) => void;
onRoadmapRemove: (roadmapId: string) => void;
};
export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
const { onClose, allRoadmaps, onRoadmapAdd, onRoadmapRemove, teamResourceConfig } = props;
const {
onClose,
allRoadmaps,
onRoadmapAdd,
onRoadmapRemove,
teamResourceConfig,
} = props;
const toast = useToast();
const popupBodyEl = useRef<HTMLDivElement>(null);
@ -37,62 +43,63 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
return;
}
const searchResults = allRoadmaps.filter(roadmap => {
return roadmap.title.toLowerCase().includes(searchText.toLowerCase()) ||
roadmap.id.toLowerCase().includes(searchText.toLowerCase());
const searchResults = allRoadmaps.filter((roadmap) => {
return (
roadmap.title.toLowerCase().includes(searchText.toLowerCase()) ||
roadmap.id.toLowerCase().includes(searchText.toLowerCase())
);
});
setSearchResults(searchResults);
}, [searchText, allRoadmaps])
}, [searchText, allRoadmaps]);
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-4xl p-4 md:h-auto">
<div
ref={popupBodyEl}
class="popup-body relative rounded-lg bg-white shadow overflow-hidden mt-4"
class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
>
<input
type="text"
placeholder="Search roadmaps"
className="w-full block px-4 py-3 outline-none placeholder:text-gray-400"
className="block w-full px-4 py-3 outline-none placeholder:text-gray-400"
value={searchText}
onInput={e => setSearchText((e.target as HTMLInputElement).value)}
onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
/>
<div className="flex flex-wrap gap-2.5 p-4 border-t min-h-[20vh]">
{
searchResults.map(roadmap => {
const isSelected = teamResourceConfig.find(r => r.resourceId === roadmap.id);
return (
<div className={`rounded-md border flex items-center ${isSelected && 'bg-gray-100'}`}>
<span className="px-4">
{roadmap.title}
</span>
<button className="p-1 h-8 w-8 flex items-center justify-center leading-none border-l hover:bg-gray-100"
onClick={() => {
if (isSelected) {
onRoadmapRemove(roadmap.id);
} else {
onRoadmapAdd(roadmap.id);
}
}}
>
{isSelected ? '-' : '+'}
</button>
</div>
)
})
}
{
searchResults.length === 0 && (
<div className="text-gray-400">
No roadmaps found
<div className="flex min-h-[20vh] flex-wrap gap-2.5 border-t p-4">
{searchResults.map((roadmap) => {
const isSelected = teamResourceConfig.find(
(r) => r.resourceId === roadmap.id
);
return (
<div
className={`flex items-center rounded-md border ${
isSelected && 'bg-gray-100'
}`}
>
<span className="px-4">{roadmap.title}</span>
<button
className="flex h-8 w-8 items-center justify-center border-l p-1 leading-none hover:bg-gray-100"
onClick={() => {
if (isSelected) {
onRoadmapRemove(roadmap.id);
} else {
onRoadmapAdd(roadmap.id);
}
}}
>
{isSelected ? '-' : '+'}
</button>
</div>
)
}
);
})}
{searchResults.length === 0 && (
<div className="text-gray-400">No roadmaps found</div>
)}
</div>
<div className="border-t flex items-center justify-between gap-2">
<div className="flex items-center justify-between gap-2 border-t">
<button
className="px-4 py-2 hover:bg-gray-100"
onClick={() => {
@ -103,7 +110,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
</button>
<button
className="px-4 py-2 hover:bg-gray-100 border-l"
className="border-l px-4 py-2 hover:bg-gray-100"
onClick={() => {
onClose();
}}

Loading…
Cancel
Save