Allow creating custom roadmaps (#4486)
* wip: custom roadmap renderer * wip: custom roadmap events * wip: roadmap content * wip: svg styles * wip: custom roadmap progress * Render progress * Shortcut progress * Progress Tracking styles * wip: edit and share button * fix: disabled the share button * wip: content links rendering * Fix progress share * Replace disabled with `canShare` * wip: show custom roadmaps * wip: users all roadmaps * fix: create roadmap api * chore: roadmap sidebar icon * wip: content links * Update links color * Create roadmap home * Create Roadmap button * Roadmap type * chore: share progress modal * wip: share roadmap * wip: change visibility * chore: custom roadmap progress in activity * wip: custom roadmap share progress * chore: friend's roadmap * wip: custom roadmap skeleton * chore: roadmap title * Restricted Page * fix: skeleton loading width * Fix create roadmap button * chore: remove user id * chore: pick roadmap and share * chore: open new tab on create roadmap * chore: change share title * chore: use team id from params * chore: team roadmap create modal * chore: create team roadmap * chore: custom roadmap modal * chore: placeholde roadmaps * chore: roadmap hint * chore: visibility label * chore: public roadmap * chore: empty screen * chore: team progress * chore: create roadmap responsive * chore: form error * chore: multi user history * wip: manage custom roadmap * chore: empty roadmap list * chore: custom roadmap visit * chore: shared roadmaps * chore: shared roadmaps * chore: empty screen and topic title * chore: show progress bar * Implement Error in topic details * Add Modal close button * fix: link groups * Refactor roadmap creation * Refactor roadmap creation * Refactor team creation * Refactor team roadmaps * Refactor team creation roadmap selection * Refactor * Refactor team roadmap loading * Refactor team roadmaps * Refactor team roadmaps listing * Refactor Account dropdown * Updates * Refactor Account dropdown * Fix Team name overflow * Change Icon color * Update team dropdown * Minor UI fixes * Fix minor UI * Flicker fix in team dropdown * Roadmap action dropdown with responsiveness * Team roadmaps listing * Update team settings * Team roadmaps listing * fix: remove visibility change * Update roadmap options modal * Add dummy renderer * Add renderer script * Add generate renderer script * Add generate renderer * wip: add share settings * Update * Update UI * Update Minor UI * Fix team issue * Update Personal roadmaps UI * Add Roadmap Secret * Update teams type * Rearrange sections * Change Secret name * Add action button on roadmap detail page --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>roadmap/copy
Arik Chakma
1 year ago
committed by
GitHub
parent
d45c8f9cb2
commit
8310671123
94 changed files with 5760 additions and 1072 deletions
@ -1,2 +1,3 @@ |
|||||||
PUBLIC_API_URL=http://api.roadmap.sh |
PUBLIC_API_URL=http://api.roadmap.sh |
||||||
PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars |
PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars |
||||||
|
PUBLIC_EDITOR_APP_URL= |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
export function Renderer(props: any) { |
||||||
|
return ( |
||||||
|
<div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black"> |
||||||
|
<h2 className="mb-2 text-xl font-semibold">Private Component</h2> |
||||||
|
<p className="mb-4"> |
||||||
|
Renderer is a private component. If you are a collaborator and have |
||||||
|
access to it. Run the following command: |
||||||
|
</p> |
||||||
|
<code className="mt-5 rounded-md bg-gray-800 p-2 text-white"> |
||||||
|
npm run generate-renderer |
||||||
|
</code> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
export function renderFlowJSON(data: any, options?: any) { |
||||||
|
console.warn("renderFlowJSON is not implemented"); |
||||||
|
console.warn("run the following command to generate the renderer:"); |
||||||
|
console.warn("> npm run generate-renderer"); |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
#!/usr/bin/env bash |
||||||
|
|
||||||
|
set -e |
||||||
|
|
||||||
|
rm -rf .temp |
||||||
|
git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw |
||||||
|
|
||||||
|
rm -rf renderer |
||||||
|
mkdir renderer |
||||||
|
|
||||||
|
# copy the files at /src/editor/renderer/* to /renderer |
||||||
|
# while replacing any existing files |
||||||
|
cp -rf .temp/web-draw/src/editor/renderer/* renderer |
||||||
|
|
||||||
|
# Add @ts-nocheck to the top of each ts and tsx file |
||||||
|
# so that the typescript compiler doesn't complain |
||||||
|
# about the missing types |
||||||
|
find renderer -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= read -r -d '' file; do |
||||||
|
if [ -f "$file" ]; then |
||||||
|
echo "// @ts-nocheck" > temp |
||||||
|
cat "$file" >> temp |
||||||
|
mv temp "$file" |
||||||
|
echo "Added @ts-nocheck to $file" |
||||||
|
fi |
||||||
|
done |
||||||
|
|
||||||
|
# remove the temporary directory |
||||||
|
rm -rf .temp |
||||||
|
|
||||||
|
# ignore the worktree changes for the renderer directory |
||||||
|
git update-index --skip-worktree renderer/* |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { Plus } from 'lucide-react'; |
||||||
|
import { isLoggedIn } from '../../../lib/jwt'; |
||||||
|
import { showLoginPopup } from '../../../lib/popup'; |
||||||
|
import { cn } from '../../../lib/classname'; |
||||||
|
import { |
||||||
|
type AllowedCustomRoadmapType, |
||||||
|
type AllowedRoadmapVisibility, |
||||||
|
CreateRoadmapModal, |
||||||
|
} from './CreateRoadmapModal'; |
||||||
|
import { useState } from 'react'; |
||||||
|
|
||||||
|
type CreateRoadmapButtonProps = { |
||||||
|
className?: string; |
||||||
|
type?: AllowedCustomRoadmapType; |
||||||
|
}; |
||||||
|
|
||||||
|
export function CreateRoadmapButton(props: CreateRoadmapButtonProps) { |
||||||
|
const { className, type } = props; |
||||||
|
|
||||||
|
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); |
||||||
|
|
||||||
|
function toggleCreateRoadmapHandler() { |
||||||
|
if (!isLoggedIn()) { |
||||||
|
return showLoginPopup(); |
||||||
|
} |
||||||
|
|
||||||
|
setIsCreatingRoadmap(true); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{isCreatingRoadmap && ( |
||||||
|
<CreateRoadmapModal |
||||||
|
type={type} |
||||||
|
onClose={() => { |
||||||
|
setIsCreatingRoadmap(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex h-full w-full items-center justify-center gap-1 overflow-hidden rounded-md border border-dashed border-gray-800 p-3 text-sm text-gray-400 hover:border-gray-600 hover:bg-gray-900 hover:text-gray-300', |
||||||
|
className |
||||||
|
)} |
||||||
|
onClick={toggleCreateRoadmapHandler} |
||||||
|
> |
||||||
|
<Plus size={16} /> |
||||||
|
Create a new roadmap |
||||||
|
</button> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,275 @@ |
|||||||
|
import { |
||||||
|
type FormEvent, |
||||||
|
type MouseEvent, |
||||||
|
useEffect, |
||||||
|
useRef, |
||||||
|
useState, |
||||||
|
} from 'react'; |
||||||
|
import { Loader2 } from 'lucide-react'; |
||||||
|
import { Modal } from '../../Modal'; |
||||||
|
import { useToast } from '../../../hooks/use-toast'; |
||||||
|
import { httpPost } from '../../../lib/http'; |
||||||
|
import { cn } from '../../../lib/classname'; |
||||||
|
import { allowedVisibilityLabels } from '../ShareRoadmapModal'; |
||||||
|
|
||||||
|
export const allowedRoadmapVisibility = [ |
||||||
|
'me', |
||||||
|
'friends', |
||||||
|
'team', |
||||||
|
'public', |
||||||
|
] as const; |
||||||
|
export type AllowedRoadmapVisibility = |
||||||
|
(typeof allowedRoadmapVisibility)[number]; |
||||||
|
export const allowedCustomRoadmapType = ['role', 'skill'] as const; |
||||||
|
export type AllowedCustomRoadmapType = |
||||||
|
(typeof allowedCustomRoadmapType)[number]; |
||||||
|
|
||||||
|
export interface RoadmapDocument { |
||||||
|
_id?: string; |
||||||
|
title: string; |
||||||
|
description?: string; |
||||||
|
creatorId: string; |
||||||
|
teamId?: string; |
||||||
|
type: AllowedCustomRoadmapType; |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
sharedFriendIds?: string[]; |
||||||
|
sharedTeamMemberIds?: string[]; |
||||||
|
nodes: any[]; |
||||||
|
edges: any[]; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
canManage: boolean; |
||||||
|
isCustomResource: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
interface CreateRoadmapModalProps { |
||||||
|
onClose: () => void; |
||||||
|
onCreated?: (roadmap: RoadmapDocument) => void; |
||||||
|
teamId?: string; |
||||||
|
type?: AllowedCustomRoadmapType; |
||||||
|
visibility?: AllowedRoadmapVisibility; |
||||||
|
} |
||||||
|
|
||||||
|
export function CreateRoadmapModal(props: CreateRoadmapModalProps) { |
||||||
|
const { onClose, onCreated, teamId, type: defaultType = 'role' } = props; |
||||||
|
|
||||||
|
const titleRef = useRef<HTMLInputElement>(null); |
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [title, setTitle] = useState(''); |
||||||
|
const [description, setDescription] = useState(''); |
||||||
|
const [type, setType] = useState<AllowedCustomRoadmapType>(defaultType); |
||||||
|
const isInvalidDescription = description?.trim().length > 80; |
||||||
|
|
||||||
|
async function handleSubmit( |
||||||
|
e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>, |
||||||
|
redirect: boolean = true |
||||||
|
) { |
||||||
|
e.preventDefault(); |
||||||
|
if (isLoading) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (title.trim() === '' || isInvalidDescription || !type) { |
||||||
|
toast.error('Please fill all the fields'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpPost<RoadmapDocument>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-create-roadmap`, |
||||||
|
{ |
||||||
|
title, |
||||||
|
description, |
||||||
|
type, |
||||||
|
...(teamId && { |
||||||
|
teamId, |
||||||
|
}), |
||||||
|
nodes: [], |
||||||
|
edges: [], |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
setIsLoading(false); |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.success('Roadmap created successfully'); |
||||||
|
if (redirect) { |
||||||
|
window.location.href = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${ |
||||||
|
response?._id |
||||||
|
}`;
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (onCreated) { |
||||||
|
onCreated(response as RoadmapDocument); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
onClose(); |
||||||
|
|
||||||
|
setTitle(''); |
||||||
|
setDescription(''); |
||||||
|
setType('role'); |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
titleRef.current?.focus(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={onClose} |
||||||
|
bodyClassName="p-4" |
||||||
|
wrapperClassName={cn(teamId && 'max-w-lg')} |
||||||
|
> |
||||||
|
<div className="mb-4"> |
||||||
|
<h2 className="text-lg font-medium text-gray-900">Create Roadmap</h2> |
||||||
|
<p className="mt-1 text-sm text-gray-500"> |
||||||
|
Add a title and description to your roadmap. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<form onSubmit={handleSubmit}> |
||||||
|
<div className="mt-4"> |
||||||
|
<label |
||||||
|
htmlFor="title" |
||||||
|
className="block text-xs uppercase text-gray-400" |
||||||
|
> |
||||||
|
Roadmap Title |
||||||
|
</label> |
||||||
|
<div className="mt-1"> |
||||||
|
<input |
||||||
|
ref={titleRef} |
||||||
|
type="text" |
||||||
|
name="title" |
||||||
|
id="title" |
||||||
|
required |
||||||
|
className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm" |
||||||
|
placeholder="Enter Title" |
||||||
|
value={title} |
||||||
|
onChange={(e) => setTitle(e.target.value)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="mt-4"> |
||||||
|
<label |
||||||
|
htmlFor="description" |
||||||
|
className="block text-xs uppercase text-gray-400" |
||||||
|
> |
||||||
|
Description |
||||||
|
</label> |
||||||
|
<div className="relative mt-1"> |
||||||
|
<textarea |
||||||
|
id="description" |
||||||
|
name="description" |
||||||
|
required |
||||||
|
className={cn( |
||||||
|
'block h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm', |
||||||
|
isInvalidDescription && 'border-red-300 bg-red-100' |
||||||
|
)} |
||||||
|
placeholder="Enter Description" |
||||||
|
value={description} |
||||||
|
onChange={(e) => setDescription(e.target.value)} |
||||||
|
/> |
||||||
|
<div className="absolute bottom-2 right-2 text-xs text-gray-400"> |
||||||
|
{description.length}/80 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-4"> |
||||||
|
<label |
||||||
|
htmlFor="type" |
||||||
|
className="block text-xs uppercase text-gray-400" |
||||||
|
> |
||||||
|
Type |
||||||
|
</label> |
||||||
|
<div className="mt-1"> |
||||||
|
<select |
||||||
|
id="type" |
||||||
|
name="type" |
||||||
|
required |
||||||
|
className="block w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm" |
||||||
|
value={type} |
||||||
|
onChange={(e) => |
||||||
|
setType(e.target.value as AllowedCustomRoadmapType) |
||||||
|
} |
||||||
|
> |
||||||
|
{allowedCustomRoadmapType.map((type) => ( |
||||||
|
<option key={type} value={type}> |
||||||
|
{type.charAt(0).toUpperCase() + type.slice(1)} Based Roadmap |
||||||
|
</option> |
||||||
|
))} |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div |
||||||
|
className={cn('mt-4 flex justify-between gap-2', teamId && 'mt-8')} |
||||||
|
> |
||||||
|
<button |
||||||
|
onClick={onClose} |
||||||
|
type="button" |
||||||
|
className={cn( |
||||||
|
'block h-9 rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100', |
||||||
|
!teamId && 'w-full' |
||||||
|
)} |
||||||
|
> |
||||||
|
Cancel |
||||||
|
</button> |
||||||
|
|
||||||
|
<div className={cn('flex items-center gap-2', !teamId && 'w-full')}> |
||||||
|
{teamId && !isLoading && ( |
||||||
|
<button |
||||||
|
disabled={isLoading} |
||||||
|
type="button" |
||||||
|
onClick={(e) => handleSubmit(e, false)} |
||||||
|
className="flex h-9 items-center justify-center rounded-md border border-black bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:bg-black hover:text-white focus:bg-black focus:text-white" |
||||||
|
> |
||||||
|
{isLoading ? ( |
||||||
|
<Loader2 size={16} className="animate-spin" /> |
||||||
|
) : ( |
||||||
|
'Save as Placeholder' |
||||||
|
)} |
||||||
|
</button> |
||||||
|
)} |
||||||
|
|
||||||
|
<button |
||||||
|
disabled={isLoading} |
||||||
|
type="submit" |
||||||
|
className={cn( |
||||||
|
'flex h-9 items-center justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800', |
||||||
|
teamId ? 'hidden sm:flex' : 'w-full' |
||||||
|
)} |
||||||
|
> |
||||||
|
{isLoading ? ( |
||||||
|
<Loader2 size={16} className="animate-spin" /> |
||||||
|
) : teamId ? ( |
||||||
|
'Continue to Editor' |
||||||
|
) : ( |
||||||
|
'Create' |
||||||
|
)} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{teamId && ( |
||||||
|
<> |
||||||
|
<p className="mt-4 hidden rounded-md border border-orange-200 bg-orange-50 p-2.5 text-sm text-orange-600 sm:block"> |
||||||
|
Preparing the roadmap might take some time, feel free to save it |
||||||
|
as a placeholder and anyone with the role <strong>admin</strong>{' '} |
||||||
|
or <strong>manager</strong> can prepare it later. |
||||||
|
</p> |
||||||
|
<p className="mt-4 rounded-md border border-orange-200 bg-orange-50 p-2.5 text-sm text-orange-600 sm:hidden"> |
||||||
|
Create a placeholder now and prepare it later. |
||||||
|
</p> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</form> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { getUrlParams } from '../../lib/browser'; |
||||||
|
import { |
||||||
|
type AppError, |
||||||
|
type FetchError, |
||||||
|
httpGet, |
||||||
|
httpPost, |
||||||
|
} from '../../lib/http'; |
||||||
|
import { RoadmapHeader } from './RoadmapHeader'; |
||||||
|
import { RoadmapRenderer } from './RoadmapRenderer'; |
||||||
|
import { TopicDetail } from '../TopicDetail/TopicDetail'; |
||||||
|
import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { currentRoadmap } from '../../stores/roadmap'; |
||||||
|
import { UserProgressModal } from '../UserProgress/UserProgressModal'; |
||||||
|
import { RestrictedPage } from './RestrictedPage'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt'; |
||||||
|
|
||||||
|
export const allowedLinkTypes = [ |
||||||
|
'video', |
||||||
|
'article', |
||||||
|
'opensource', |
||||||
|
'course', |
||||||
|
'website', |
||||||
|
'podcast', |
||||||
|
] as const; |
||||||
|
|
||||||
|
export type AllowedLinkTypes = (typeof allowedLinkTypes)[number]; |
||||||
|
|
||||||
|
export interface RoadmapContentDocument { |
||||||
|
_id?: string; |
||||||
|
roadmapId: string; |
||||||
|
nodeId: string; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
links: { |
||||||
|
id: string; |
||||||
|
type: AllowedLinkTypes; |
||||||
|
title: string; |
||||||
|
url: string; |
||||||
|
}[]; |
||||||
|
} |
||||||
|
|
||||||
|
export function hideRoadmapLoader() { |
||||||
|
const loaderEl = document.querySelector( |
||||||
|
'[data-roadmap-loader]' |
||||||
|
) as HTMLElement; |
||||||
|
if (loaderEl) { |
||||||
|
loaderEl.remove(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export function CustomRoadmap() { |
||||||
|
const { id, secret } = getUrlParams() as { id: string; secret: string }; |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [roadmap, setRoadmap] = useState<RoadmapDocument | null>(null); |
||||||
|
const [error, setError] = useState<AppError | FetchError | undefined>(); |
||||||
|
|
||||||
|
async function getRoadmap() { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
const roadmapUrl = new URL( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}` |
||||||
|
); |
||||||
|
if (secret) { |
||||||
|
roadmapUrl.searchParams.set('secret', secret); |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpGet<RoadmapDocument>( |
||||||
|
roadmapUrl.toString() |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
setError(error); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
document.title = `${response.title} - roadmap.sh`; |
||||||
|
|
||||||
|
setRoadmap(response); |
||||||
|
currentRoadmap.set(response); |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
|
||||||
|
async function trackVisit() { |
||||||
|
if (!isLoggedIn()) return; |
||||||
|
await httpPost(`${import.meta.env.PUBLIC_API_URL}/v1-visit`, { |
||||||
|
resourceId: id, |
||||||
|
resourceType: 'roadmap', |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getRoadmap().finally(() => { |
||||||
|
hideRoadmapLoader(); |
||||||
|
}); |
||||||
|
trackVisit().then(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
if (error) { |
||||||
|
return <RestrictedPage error={error} />; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<RoadmapHeader /> |
||||||
|
<RoadmapRenderer roadmap={roadmap!} /> |
||||||
|
<TopicDetail canSubmitContribution={false} /> |
||||||
|
<UserProgressModal |
||||||
|
resourceId={roadmap?._id!} |
||||||
|
resourceType="roadmap" |
||||||
|
isCustomResource={true} |
||||||
|
/> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import { CircleSlash } from 'lucide-react'; |
||||||
|
|
||||||
|
export function EmptyRoadmap() { |
||||||
|
return ( |
||||||
|
<div className="flex h-full items-center justify-center"> |
||||||
|
<div className="flex flex-col items-center"> |
||||||
|
<CircleSlash className="mx-auto h-20 w-20 text-gray-400" /> |
||||||
|
<h3 className="mt-4">This roadmap is currently empty.</h3> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
import MoreIcon from '../../icons/more-vertical.svg'; |
||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react'; |
||||||
|
|
||||||
|
type PersonalRoadmapActionDropdownProps = { |
||||||
|
onDelete?: () => void; |
||||||
|
onCustomize?: () => void; |
||||||
|
onUpdateSharing?: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function PersonalRoadmapActionDropdown(props: PersonalRoadmapActionDropdownProps) { |
||||||
|
const { onDelete, onUpdateSharing, onCustomize } = props; |
||||||
|
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null); |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
|
||||||
|
useOutsideClick(menuRef, () => { |
||||||
|
setIsOpen(false); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative"> |
||||||
|
<button |
||||||
|
disabled={false} |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex" |
||||||
|
> |
||||||
|
<img alt="menu" src={MoreIcon.src} className="h-4 w-4" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
<button |
||||||
|
disabled={false} |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden" |
||||||
|
> |
||||||
|
<MoreVertical size={14} /> |
||||||
|
Options |
||||||
|
</button> |
||||||
|
|
||||||
|
{isOpen && ( |
||||||
|
<div |
||||||
|
ref={menuRef} |
||||||
|
className="align-right absolute right-auto top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md sm:right-0" |
||||||
|
> |
||||||
|
<ul> |
||||||
|
{onUpdateSharing && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onUpdateSharing(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Lock size={14} className="mr-2" /> |
||||||
|
Sharing |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onCustomize && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onCustomize(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Shapes size={14} className="mr-2" /> |
||||||
|
Customize |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onDelete && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onDelete(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Trash2 size={14} className="mr-2" /> |
||||||
|
Delete |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,238 @@ |
|||||||
|
import { httpDelete } from '../../lib/http'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { |
||||||
|
ExternalLink, |
||||||
|
Shapes, |
||||||
|
type LucideIcon, |
||||||
|
Globe, |
||||||
|
LockIcon, |
||||||
|
Users, |
||||||
|
} from 'lucide-react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { |
||||||
|
type AllowedRoadmapVisibility, |
||||||
|
type RoadmapDocument, |
||||||
|
} from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import RoadmapIcon from '../../icons/roadmap.svg'; |
||||||
|
import { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown'; |
||||||
|
import type { GetRoadmapListResponse } from './RoadmapListPage'; |
||||||
|
import { useState, type Dispatch, type SetStateAction } from 'react'; |
||||||
|
import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal'; |
||||||
|
|
||||||
|
type PersonalRoadmapListType = { |
||||||
|
roadmaps: GetRoadmapListResponse['personalRoadmaps']; |
||||||
|
onDelete: (roadmapId: string) => void; |
||||||
|
setAllRoadmaps: Dispatch<SetStateAction<GetRoadmapListResponse>>; |
||||||
|
}; |
||||||
|
|
||||||
|
export function PersonalRoadmapList(props: PersonalRoadmapListType) { |
||||||
|
const { roadmaps: roadmapList, onDelete, setAllRoadmaps } = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [selectedRoadmap, setSelectedRoadmap] = useState< |
||||||
|
GetRoadmapListResponse['personalRoadmaps'][number] | null |
||||||
|
>(null); |
||||||
|
|
||||||
|
async function deleteRoadmap(roadmapId: string) { |
||||||
|
const { response, error } = await httpDelete<RoadmapDocument[]>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-delete-roadmap/${roadmapId}` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
console.error(error); |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.success('Roadmap deleted'); |
||||||
|
onDelete(roadmapId); |
||||||
|
} |
||||||
|
|
||||||
|
async function onRemove(roadmapId: string) { |
||||||
|
pageProgressMessage.set('Deleting roadmap'); |
||||||
|
|
||||||
|
deleteRoadmap(roadmapId).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
const shareSettingsModal = selectedRoadmap && ( |
||||||
|
<ShareOptionsModal |
||||||
|
visibility={selectedRoadmap.visibility} |
||||||
|
sharedFriendIds={selectedRoadmap.sharedFriendIds} |
||||||
|
sharedTeamMemberIds={selectedRoadmap.sharedTeamMemberIds} |
||||||
|
roadmapId={selectedRoadmap._id!} |
||||||
|
onClose={() => setSelectedRoadmap(null)} |
||||||
|
onShareSettingsUpdate={(settings) => { |
||||||
|
setAllRoadmaps((prev) => { |
||||||
|
return { |
||||||
|
...prev, |
||||||
|
personalRoadmaps: prev.personalRoadmaps.map((roadmap) => { |
||||||
|
if (roadmap._id === selectedRoadmap._id) { |
||||||
|
return { |
||||||
|
...roadmap, |
||||||
|
...settings, |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
return roadmap; |
||||||
|
}), |
||||||
|
}; |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
if (roadmapList.length === 0) { |
||||||
|
return ( |
||||||
|
<div className="flex flex-col items-center p-4 py-20"> |
||||||
|
<img |
||||||
|
alt="roadmap" |
||||||
|
src={RoadmapIcon.src} |
||||||
|
className="mb-4 h-24 w-24 opacity-10" |
||||||
|
/> |
||||||
|
<h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3> |
||||||
|
<p className="text-base text-gray-500"> |
||||||
|
Create a roadmap to get started |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{shareSettingsModal} |
||||||
|
<div className="mb-3 flex items-center justify-between"> |
||||||
|
<span className={'text-sm text-gray-400'}> |
||||||
|
{roadmapList.length} custom roadmap(s) |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<ul className="flex flex-col divide-y rounded-md border"> |
||||||
|
{roadmapList.map((roadmap) => { |
||||||
|
return ( |
||||||
|
<CustomRoadmapItem |
||||||
|
key={roadmap._id!} |
||||||
|
roadmap={roadmap} |
||||||
|
onRemove={onRemove} |
||||||
|
setSelectedRoadmap={setSelectedRoadmap} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type CustomRoadmapItemProps = { |
||||||
|
roadmap: GetRoadmapListResponse['personalRoadmaps'][number]; |
||||||
|
onRemove: (roadmapId: string) => Promise<void>; |
||||||
|
setSelectedRoadmap: ( |
||||||
|
roadmap: GetRoadmapListResponse['personalRoadmaps'][number] | null |
||||||
|
) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
function CustomRoadmapItem(props: CustomRoadmapItemProps) { |
||||||
|
const { roadmap, onRemove, setSelectedRoadmap } = props; |
||||||
|
|
||||||
|
const editorLink = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmap._id}`; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li |
||||||
|
className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_110px]" |
||||||
|
key={roadmap._id!} |
||||||
|
> |
||||||
|
<div className="mb-3 grid grid-cols-1 sm:mb-0"> |
||||||
|
<p className="mb-1.5 truncate text-base font-medium leading-tight text-black"> |
||||||
|
{roadmap.title} |
||||||
|
</p> |
||||||
|
<span className="flex items-center text-xs leading-none text-gray-400"> |
||||||
|
<VisibilityBadge |
||||||
|
visibility={roadmap.visibility!} |
||||||
|
sharedFriendIds={roadmap.sharedFriendIds} |
||||||
|
/> |
||||||
|
<span className="mx-2 font-semibold">·</span> |
||||||
|
<Shapes size={16} className="mr-1 inline-block h-4 w-4" /> |
||||||
|
{roadmap.topics} topic |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="mr-1 flex items-center justify-start sm:justify-end"> |
||||||
|
<PersonalRoadmapActionDropdown |
||||||
|
onUpdateSharing={() => { |
||||||
|
setSelectedRoadmap(roadmap); |
||||||
|
}} |
||||||
|
onCustomize={() => { |
||||||
|
window.open(editorLink, '_blank'); |
||||||
|
}} |
||||||
|
onDelete={() => { |
||||||
|
if (confirm('Are you sure you want to remove this roadmap?')) { |
||||||
|
onRemove(roadmap._id!).finally(() => {}); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<a |
||||||
|
href={`/r?id=${roadmap._id}`} |
||||||
|
className={ |
||||||
|
'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none' |
||||||
|
} |
||||||
|
target={'_blank'} |
||||||
|
> |
||||||
|
<ExternalLink className="inline-block h-4 w-4" /> |
||||||
|
Visit |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type VisibilityLabelProps = { |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
sharedFriendIds?: string[]; |
||||||
|
}; |
||||||
|
|
||||||
|
const visibilityDetails: Record< |
||||||
|
AllowedRoadmapVisibility, |
||||||
|
{ |
||||||
|
icon: LucideIcon; |
||||||
|
label: string; |
||||||
|
} |
||||||
|
> = { |
||||||
|
public: { |
||||||
|
icon: Globe, |
||||||
|
label: 'Public', |
||||||
|
}, |
||||||
|
me: { |
||||||
|
icon: LockIcon, |
||||||
|
label: 'Only me', |
||||||
|
}, |
||||||
|
team: { |
||||||
|
icon: Users, |
||||||
|
label: 'Team Member(s)', |
||||||
|
}, |
||||||
|
friends: { |
||||||
|
icon: Users, |
||||||
|
label: 'Friend(s)', |
||||||
|
}, |
||||||
|
} as const; |
||||||
|
|
||||||
|
function VisibilityBadge(props: VisibilityLabelProps) { |
||||||
|
const { visibility, sharedFriendIds = [] } = props; |
||||||
|
|
||||||
|
const { label, icon: Icon } = visibilityDetails[visibility]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={`inline-flex items-center gap-1.5 whitespace-nowrap text-xs font-normal`} |
||||||
|
> |
||||||
|
<Icon className="inline-block h-3 w-3" /> |
||||||
|
<div className="flex items-center"> |
||||||
|
{visibility === 'friends' && sharedFriendIds?.length > 0 && ( |
||||||
|
<span className="mr-1">{sharedFriendIds.length}</span> |
||||||
|
)} |
||||||
|
{label} |
||||||
|
</div> |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import { HelpCircle } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { ResourceType } from '../../lib/resource-progress'; |
||||||
|
import { useState } from 'react'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { canManageCurrentRoadmap, currentRoadmap } from '../../stores/roadmap'; |
||||||
|
import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal'; |
||||||
|
|
||||||
|
type ResourceProgressStatsProps = { |
||||||
|
resourceId: string; |
||||||
|
resourceType: ResourceType; |
||||||
|
isSecondaryBanner?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ResourceProgressStats(props: ResourceProgressStatsProps) { |
||||||
|
const { isSecondaryBanner = false } = props; |
||||||
|
|
||||||
|
const [isSharing, setIsSharing] = useState(false); |
||||||
|
|
||||||
|
const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap); |
||||||
|
const $currentRoadmap = useStore(currentRoadmap); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{isSharing && $canManageCurrentRoadmap && $currentRoadmap && ( |
||||||
|
<ShareOptionsModal |
||||||
|
visibility={$currentRoadmap?.visibility} |
||||||
|
teamId={$currentRoadmap?.teamId} |
||||||
|
roadmapId={$currentRoadmap?._id!} |
||||||
|
sharedFriendIds={$currentRoadmap?.sharedFriendIds || []} |
||||||
|
sharedTeamMemberIds={$currentRoadmap?.sharedTeamMemberIds || []} |
||||||
|
onClose={() => setIsSharing(false)} |
||||||
|
onShareSettingsUpdate={(settings) => { |
||||||
|
currentRoadmap.set({ |
||||||
|
...$currentRoadmap, |
||||||
|
...settings, |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
<div |
||||||
|
data-progress-nums-container="" |
||||||
|
className={cn( |
||||||
|
'striped-loader relative hidden items-center justify-between bg-white px-2 py-1.5 sm:flex', |
||||||
|
{ |
||||||
|
'rounded-bl-md rounded-br-md': isSecondaryBanner, |
||||||
|
'rounded-md': !isSecondaryBanner, |
||||||
|
} |
||||||
|
)} |
||||||
|
> |
||||||
|
<p |
||||||
|
className="flex text-sm opacity-0 transition-opacity duration-300" |
||||||
|
data-progress-nums="" |
||||||
|
> |
||||||
|
<span className="mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900"> |
||||||
|
<span data-progress-percentage="">0</span>% Done |
||||||
|
</span> |
||||||
|
|
||||||
|
<span className="itesm-center hidden md:flex"> |
||||||
|
<span> |
||||||
|
<span data-progress-done="">0</span> completed |
||||||
|
</span> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-learning="">0</span> in progress |
||||||
|
</span> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-skipped="">0</span> skipped |
||||||
|
</span> |
||||||
|
<span className="mx-1.5 text-gray-400">·</span> |
||||||
|
<span> |
||||||
|
<span data-progress-total="">0</span> Total |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
<span className="md:hidden"> |
||||||
|
<span data-progress-done="">0</span> of{' '} |
||||||
|
<span data-progress-total="">0</span> Done |
||||||
|
</span> |
||||||
|
</p> |
||||||
|
|
||||||
|
<div |
||||||
|
className="flex items-center gap-3 opacity-0 transition-opacity duration-300" |
||||||
|
data-progress-nums="" |
||||||
|
> |
||||||
|
<button |
||||||
|
data-popup="progress-help" |
||||||
|
className="flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black" |
||||||
|
data-progress-nums="" |
||||||
|
> |
||||||
|
<HelpCircle className="h-3.5 w-3.5 stroke-[2.5px]" /> |
||||||
|
Track Progress |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div |
||||||
|
data-progress-nums-container="" |
||||||
|
className="striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden" |
||||||
|
> |
||||||
|
<span |
||||||
|
data-progress-nums="" |
||||||
|
className="text-gray-500 opacity-0 transition-opacity duration-300" |
||||||
|
> |
||||||
|
<span data-progress-done="">0</span> of{' '} |
||||||
|
<span data-progress-total="">0</span> Done |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { ShieldBan } from 'lucide-react'; |
||||||
|
import type { FetchError } from '../../lib/http'; |
||||||
|
|
||||||
|
type RestrictedPageProps = { |
||||||
|
error: FetchError; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RestrictedPage(props: RestrictedPageProps) { |
||||||
|
const { error } = props; |
||||||
|
|
||||||
|
if (error.status === 404) { |
||||||
|
return ( |
||||||
|
<ErrorMessage |
||||||
|
icon={<ShieldBan className="h-16 w-16" />} |
||||||
|
title="Roadmap not found" |
||||||
|
message="The roadmap you are looking for does not exist or has been deleted." |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ErrorMessage |
||||||
|
icon={<ShieldBan className="h-16 w-16" />} |
||||||
|
title="Restricted Access" |
||||||
|
message={error?.message} |
||||||
|
/> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type ErrorMessageProps = { |
||||||
|
title: string; |
||||||
|
message: string; |
||||||
|
icon: React.ReactNode; |
||||||
|
}; |
||||||
|
|
||||||
|
function ErrorMessage(props: ErrorMessageProps) { |
||||||
|
const { title, message, icon } = props; |
||||||
|
return ( |
||||||
|
<div className="flex grow flex-col items-center justify-center"> |
||||||
|
{icon} |
||||||
|
<h2 className="mt-4 text-2xl font-semibold">{title}</h2> |
||||||
|
<p>{message || 'This roadmap is not available for public access.'}</p> |
||||||
|
|
||||||
|
<a |
||||||
|
href="/" |
||||||
|
className="mt-4 font-medium underline underline-offset-2 hover:no-underline" |
||||||
|
> |
||||||
|
← Go back to home |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react'; |
||||||
|
|
||||||
|
type RoadmapActionButtonProps = { |
||||||
|
onDelete?: () => void; |
||||||
|
onCustomize?: () => void; |
||||||
|
onUpdateSharing?: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RoadmapActionButton(props: RoadmapActionButtonProps) { |
||||||
|
const { onDelete, onUpdateSharing, onCustomize } = props; |
||||||
|
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null); |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
|
||||||
|
useOutsideClick(menuRef, () => { |
||||||
|
setIsOpen(false); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative"> |
||||||
|
<button |
||||||
|
disabled={false} |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:pl-1.5 sm:pr-3 sm:text-sm" |
||||||
|
> |
||||||
|
<MoreVertical className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" /> |
||||||
|
<span className="hidden sm:inline">Actions</span> |
||||||
|
</button> |
||||||
|
|
||||||
|
{isOpen && ( |
||||||
|
<div |
||||||
|
ref={menuRef} |
||||||
|
className="align-right absolute right-0 top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md" |
||||||
|
> |
||||||
|
<ul> |
||||||
|
{onUpdateSharing && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onUpdateSharing(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Lock size={14} className="mr-2" /> |
||||||
|
Sharing |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onCustomize && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onCustomize(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Shapes size={14} className="mr-2" /> |
||||||
|
Customize |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onDelete && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onDelete(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Trash2 size={14} className="mr-2" /> |
||||||
|
Delete |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
import { RoadmapHint } from './RoadmapHint'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { canManageCurrentRoadmap, currentRoadmap } from '../../stores/roadmap'; |
||||||
|
import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal'; |
||||||
|
import { useState } from 'react'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { httpDelete, httpPut } from '../../lib/http'; |
||||||
|
import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { RoadmapActionButton } from './RoadmapActionButton'; |
||||||
|
|
||||||
|
type RoadmapHeaderProps = {}; |
||||||
|
|
||||||
|
export function RoadmapHeader(props: RoadmapHeaderProps) { |
||||||
|
const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap); |
||||||
|
const $currentRoadmap = useStore(currentRoadmap); |
||||||
|
|
||||||
|
const { title, description, _id: roadmapId } = useStore(currentRoadmap) || {}; |
||||||
|
|
||||||
|
const [isSharing, setIsSharing] = useState(false); |
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
async function deleteResource() { |
||||||
|
pageProgressMessage.set('Deleting roadmap'); |
||||||
|
|
||||||
|
const teamId = $currentRoadmap?.teamId; |
||||||
|
const baseApiUrl = import.meta.env.PUBLIC_API_URL; |
||||||
|
|
||||||
|
let error, response; |
||||||
|
if (teamId) { |
||||||
|
({ error, response } = await httpPut<TeamResourceConfig>( |
||||||
|
`${baseApiUrl}/v1-delete-team-resource-config/${teamId}`, |
||||||
|
{ |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
} |
||||||
|
)); |
||||||
|
} else { |
||||||
|
({ error, response } = await httpDelete<TeamResourceConfig>( |
||||||
|
`${baseApiUrl}/v1-delete-roadmap/${roadmapId}` |
||||||
|
)); |
||||||
|
} |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.success('Roadmap removed'); |
||||||
|
if (!teamId) { |
||||||
|
window.location.href = '/account/roadmaps'; |
||||||
|
} else { |
||||||
|
window.location.href = `/team/roadmaps?t=${teamId}`; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="border-b"> |
||||||
|
<div className="container relative py-5 sm:py-12"> |
||||||
|
<div className="mb-3 mt-0 sm:mb-4"> |
||||||
|
<h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1> |
||||||
|
<p className="mt-0.5 text-sm text-gray-500 sm:text-lg"> |
||||||
|
{description} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex justify-between gap-2 sm:gap-0"> |
||||||
|
<div className="flex gap-1 sm:gap-2"> |
||||||
|
<a |
||||||
|
href="/roadmaps" |
||||||
|
className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm" |
||||||
|
aria-label="Back to All Roadmaps" |
||||||
|
> |
||||||
|
←<span className="hidden sm:inline"> All Roadmaps</span> |
||||||
|
</a> |
||||||
|
|
||||||
|
<button |
||||||
|
data-guest-required |
||||||
|
data-popup="login-popup" |
||||||
|
className="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm" |
||||||
|
aria-label="Subscribe for Updates" |
||||||
|
> |
||||||
|
<span className="ml-2">Subscribe</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
{$canManageCurrentRoadmap && ( |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
{isSharing && $currentRoadmap && ( |
||||||
|
<ShareOptionsModal |
||||||
|
visibility={$currentRoadmap?.visibility} |
||||||
|
teamId={$currentRoadmap?.teamId} |
||||||
|
roadmapId={$currentRoadmap?._id!} |
||||||
|
sharedFriendIds={$currentRoadmap?.sharedFriendIds || []} |
||||||
|
sharedTeamMemberIds={ |
||||||
|
$currentRoadmap?.sharedTeamMemberIds || [] |
||||||
|
} |
||||||
|
onClose={() => setIsSharing(false)} |
||||||
|
onShareSettingsUpdate={(settings) => { |
||||||
|
currentRoadmap.set({ |
||||||
|
...$currentRoadmap, |
||||||
|
...settings, |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<RoadmapActionButton |
||||||
|
onDelete={() => { |
||||||
|
const confirmation = window.confirm( |
||||||
|
'Are you sure you want to delete this roadmap?' |
||||||
|
); |
||||||
|
|
||||||
|
if (!confirmation) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
deleteResource().finally(() => null); |
||||||
|
}} |
||||||
|
onCustomize={() => { |
||||||
|
const editorLink = `${ |
||||||
|
import.meta.env.PUBLIC_EDITOR_APP_URL |
||||||
|
}/${$currentRoadmap?._id}`;
|
||||||
|
|
||||||
|
window.open(editorLink, '_blank'); |
||||||
|
}} |
||||||
|
onUpdateSharing={() => { |
||||||
|
setIsSharing(true); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<RoadmapHint |
||||||
|
roadmapTitle={title!} |
||||||
|
hasTNSBanner={false} |
||||||
|
roadmapId={roadmapId!} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { ResourceProgressStats } from './ResourceProgressStats'; |
||||||
|
|
||||||
|
type RoadmapHintProps = { |
||||||
|
roadmapId: string; |
||||||
|
roadmapTitle: string; |
||||||
|
hasTNSBanner?: boolean; |
||||||
|
tnsBannerLink?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RoadmapHint(props: RoadmapHintProps) { |
||||||
|
const { |
||||||
|
roadmapTitle, |
||||||
|
roadmapId, |
||||||
|
hasTNSBanner = false, |
||||||
|
tnsBannerLink = '', |
||||||
|
} = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn('mb-0 mt-4 rounded-md border-0 sm:mt-7 sm:border', { |
||||||
|
'sm:-mb-[82px]': hasTNSBanner, |
||||||
|
'sm:-mb-[65px]': !hasTNSBanner, |
||||||
|
})} |
||||||
|
> |
||||||
|
{hasTNSBanner && ( |
||||||
|
<div className="hidden border-b bg-gray-100 px-2 py-1.5 sm:block"> |
||||||
|
<p className="text-sm"> |
||||||
|
Get the latest {roadmapTitle} news from our sister site{' '} |
||||||
|
<a |
||||||
|
href={tnsBannerLink} |
||||||
|
target="_blank" |
||||||
|
className="font-semibold underline" |
||||||
|
> |
||||||
|
TheNewStack.io |
||||||
|
</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
<ResourceProgressStats |
||||||
|
isSecondaryBanner={hasTNSBanner} |
||||||
|
resourceId={roadmapId} |
||||||
|
resourceType="roadmap" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,134 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { |
||||||
|
CreateRoadmapModal, |
||||||
|
type RoadmapDocument, |
||||||
|
} from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { PersonalRoadmapList } from './PersonalRoadmapList'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { SharedRoadmapList } from './SharedRoadmapList'; |
||||||
|
import type { FriendshipStatus } from '../Befriend'; |
||||||
|
|
||||||
|
export type FriendUserType = { |
||||||
|
id: string; |
||||||
|
name: string; |
||||||
|
avatar: string; |
||||||
|
status: FriendshipStatus; |
||||||
|
}; |
||||||
|
|
||||||
|
export type GetRoadmapListResponse = { |
||||||
|
personalRoadmaps: (RoadmapDocument & { |
||||||
|
topics: number; |
||||||
|
})[]; |
||||||
|
sharedRoadmaps: (RoadmapDocument & { |
||||||
|
topics: number; |
||||||
|
creator: FriendUserType; |
||||||
|
})[]; |
||||||
|
}; |
||||||
|
|
||||||
|
type TabType = { |
||||||
|
label: string; |
||||||
|
value: 'personal' | 'shared'; |
||||||
|
}; |
||||||
|
|
||||||
|
const tabTypes: TabType[] = [ |
||||||
|
{ label: 'Personal', value: 'personal' }, |
||||||
|
{ label: 'Shared by Friends', value: 'shared' }, |
||||||
|
]; |
||||||
|
|
||||||
|
export function RoadmapListPage() { |
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); |
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState<TabType['value']>('personal'); |
||||||
|
const [allRoadmaps, setAllRoadmaps] = useState<GetRoadmapListResponse>({ |
||||||
|
personalRoadmaps: [], |
||||||
|
sharedRoadmaps: [], |
||||||
|
}); |
||||||
|
|
||||||
|
async function loadRoadmapList() { |
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpGet<GetRoadmapListResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-roadmap-list` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
console.error(error); |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setAllRoadmaps( |
||||||
|
response! || { |
||||||
|
personalRoadmaps: [], |
||||||
|
sharedRoadmaps: [], |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadRoadmapList().finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (isLoading) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{isCreatingRoadmap && ( |
||||||
|
<CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} /> |
||||||
|
)} |
||||||
|
|
||||||
|
<div className="mb-6 flex items-center justify-between"> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
{tabTypes.map((tab) => { |
||||||
|
return ( |
||||||
|
<button |
||||||
|
key={tab.value} |
||||||
|
className={`relative flex items-center justify-center rounded-md border p-1 px-3 text-sm ${ |
||||||
|
activeTab === tab.value ? ' border-gray-400 bg-gray-200 ' : '' |
||||||
|
} w-full sm:w-auto`}
|
||||||
|
onClick={() => setActiveTab(tab.value)} |
||||||
|
> |
||||||
|
{tab.label} |
||||||
|
</button> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
<button |
||||||
|
className={`relative flex w-full items-center justify-center rounded-md border p-1 px-3 text-sm sm:w-auto`} |
||||||
|
onClick={() => setIsCreatingRoadmap(true)} |
||||||
|
> |
||||||
|
+ Create Roadmap |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-4"> |
||||||
|
{activeTab === 'personal' && ( |
||||||
|
<PersonalRoadmapList |
||||||
|
roadmaps={allRoadmaps?.personalRoadmaps} |
||||||
|
setAllRoadmaps={setAllRoadmaps} |
||||||
|
onDelete={(roadmapId) => { |
||||||
|
setAllRoadmaps({ |
||||||
|
...allRoadmaps, |
||||||
|
personalRoadmaps: allRoadmaps.personalRoadmaps.filter( |
||||||
|
(r) => r._id !== roadmapId |
||||||
|
), |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{activeTab === 'shared' && ( |
||||||
|
<SharedRoadmapList roadmaps={allRoadmaps?.sharedRoadmaps} /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
svg text tspan { |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
text-rendering: optimizeSpeed; |
||||||
|
} |
||||||
|
|
||||||
|
svg > g[data-type='topic'], |
||||||
|
svg > g[data-type='subtopic'], |
||||||
|
svg > g > g[data-type='link-item'], |
||||||
|
svg > g[data-type='button'] { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
svg > g[data-type='topic']:hover > rect { |
||||||
|
fill: #d6d700; |
||||||
|
} |
||||||
|
|
||||||
|
svg > g[data-type='subtopic']:hover > rect { |
||||||
|
fill: #f3c950; |
||||||
|
} |
||||||
|
svg > g[data-type='button']:hover { |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
|
||||||
|
svg .done rect { |
||||||
|
fill: #cbcbcb !important; |
||||||
|
} |
||||||
|
|
||||||
|
svg .done text, |
||||||
|
svg .skipped text { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
|
||||||
|
svg > g[data-type='topic'].learning > rect + text, |
||||||
|
svg > g[data-type='topic'].done > rect + text { |
||||||
|
fill: black; |
||||||
|
} |
||||||
|
|
||||||
|
svg > g[data-type='subtipic'].done > rect + text, |
||||||
|
svg > g[data-type='subtipic'].learning > rect + text { |
||||||
|
fill: #cbcbcb; |
||||||
|
} |
||||||
|
|
||||||
|
svg .learning rect { |
||||||
|
fill: #dad1fd !important; |
||||||
|
} |
||||||
|
svg .learning text { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
svg .skipped rect { |
||||||
|
fill: #496b69 !important; |
||||||
|
} |
||||||
@ -0,0 +1,177 @@ |
|||||||
|
import { useCallback, useEffect, useRef, useState } from 'react'; |
||||||
|
import { Renderer } from '../../../renderer'; |
||||||
|
import './RoadmapRenderer.css'; |
||||||
|
import { |
||||||
|
renderResourceProgress, |
||||||
|
updateResourceProgress, |
||||||
|
type ResourceProgressType, |
||||||
|
renderTopicProgress, |
||||||
|
refreshProgressCounters, |
||||||
|
} from '../../lib/resource-progress'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { EmptyRoadmap } from './EmptyRoadmap'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt'; |
||||||
|
import { httpPost } from '../../lib/http'; |
||||||
|
|
||||||
|
type RoadmapRendererProps = { |
||||||
|
roadmap: RoadmapDocument; |
||||||
|
}; |
||||||
|
|
||||||
|
type RoadmapNodeDetails = { |
||||||
|
nodeId: string; |
||||||
|
nodeType: string; |
||||||
|
targetGroup: SVGElement; |
||||||
|
}; |
||||||
|
|
||||||
|
export function getNodeDetails( |
||||||
|
svgElement: SVGElement |
||||||
|
): RoadmapNodeDetails | null { |
||||||
|
const targetGroup = (svgElement?.closest('g') as SVGElement) || {}; |
||||||
|
|
||||||
|
const nodeId = targetGroup?.dataset?.nodeId; |
||||||
|
const nodeType = targetGroup?.dataset?.type; |
||||||
|
if (!nodeId || !nodeType) return null; |
||||||
|
|
||||||
|
return { nodeId, nodeType, targetGroup }; |
||||||
|
} |
||||||
|
|
||||||
|
export const allowedClickableNodeTypes = [ |
||||||
|
'topic', |
||||||
|
'subtopic', |
||||||
|
'button', |
||||||
|
'link-item', |
||||||
|
]; |
||||||
|
|
||||||
|
export function RoadmapRenderer(props: RoadmapRendererProps) { |
||||||
|
const { roadmap } = props; |
||||||
|
const roadmapRef = useRef<HTMLDivElement>(null); |
||||||
|
const roadmapId = roadmap._id!; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
const [hideRenderer, setHideRenderer] = useState(false); |
||||||
|
|
||||||
|
async function updateTopicStatus( |
||||||
|
topicId: string, |
||||||
|
newStatus: ResourceProgressType |
||||||
|
) { |
||||||
|
pageProgressMessage.set('Updating progress'); |
||||||
|
updateResourceProgress( |
||||||
|
{ |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
topicId, |
||||||
|
}, |
||||||
|
newStatus |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
renderTopicProgress(topicId, newStatus); |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
toast.error('Something went wrong, please try again.'); |
||||||
|
console.error(err); |
||||||
|
}) |
||||||
|
.finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
refreshProgressCounters(); |
||||||
|
}); |
||||||
|
|
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const handleSvgClick = useCallback((e: MouseEvent) => { |
||||||
|
const target = e.target as SVGElement; |
||||||
|
const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {}; |
||||||
|
if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType)) |
||||||
|
return; |
||||||
|
|
||||||
|
if (nodeType === 'button' || nodeType === 'link-item') { |
||||||
|
const link = targetGroup?.dataset?.link || ''; |
||||||
|
const isExternalLink = link.startsWith('http'); |
||||||
|
if (isExternalLink) { |
||||||
|
window.open(link, '_blank'); |
||||||
|
} else { |
||||||
|
window.location.href = link; |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusLearning = targetGroup?.classList.contains('learning'); |
||||||
|
const isCurrentStatusSkipped = targetGroup?.classList.contains('skipped'); |
||||||
|
|
||||||
|
if (e.shiftKey) { |
||||||
|
e.preventDefault(); |
||||||
|
updateTopicStatus( |
||||||
|
nodeId, |
||||||
|
isCurrentStatusLearning ? 'pending' : 'learning' |
||||||
|
); |
||||||
|
return; |
||||||
|
} else if (e.altKey) { |
||||||
|
e.preventDefault(); |
||||||
|
updateTopicStatus(nodeId, isCurrentStatusSkipped ? 'pending' : 'skipped'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
window.dispatchEvent( |
||||||
|
new CustomEvent('roadmap.node.click', { |
||||||
|
detail: { |
||||||
|
topicId: nodeId, |
||||||
|
resourceId: roadmap?._id, |
||||||
|
resourceType: 'roadmap', |
||||||
|
isCustomResource: true, |
||||||
|
}, |
||||||
|
}) |
||||||
|
); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const handleSvgRightClick = useCallback((e: MouseEvent) => { |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
const target = e.target as SVGElement; |
||||||
|
const { nodeId, nodeType, targetGroup } = getNodeDetails(target) || {}; |
||||||
|
if (!nodeId || !nodeType || !allowedClickableNodeTypes.includes(nodeType)) |
||||||
|
return; |
||||||
|
|
||||||
|
if (nodeType === 'button' || nodeType === 'link-item') { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const isCurrentStatusDone = targetGroup?.classList.contains('done'); |
||||||
|
updateTopicStatus(nodeId, isCurrentStatusDone ? 'pending' : 'done'); |
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!roadmapRef?.current) return; |
||||||
|
roadmapRef?.current?.addEventListener('click', handleSvgClick); |
||||||
|
roadmapRef?.current?.addEventListener('contextmenu', handleSvgRightClick); |
||||||
|
|
||||||
|
return () => { |
||||||
|
roadmapRef?.current?.removeEventListener('click', handleSvgClick); |
||||||
|
roadmapRef?.current?.removeEventListener( |
||||||
|
'contextmenu', |
||||||
|
handleSvgRightClick |
||||||
|
); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex grow bg-gray-50 pb-8 pt-4 sm:pt-12"> |
||||||
|
<div className="container !max-w-[1000px]"> |
||||||
|
<Renderer |
||||||
|
ref={roadmapRef} |
||||||
|
roadmap={{ nodes: roadmap?.nodes!, edges: roadmap?.edges! }} |
||||||
|
onRendered={() => { |
||||||
|
renderResourceProgress('roadmap', roadmapId).then(() => { |
||||||
|
if (roadmap?.nodes?.length === 0) { |
||||||
|
setHideRenderer(true); |
||||||
|
roadmapRef?.current?.classList.add('hidden'); |
||||||
|
} |
||||||
|
}); |
||||||
|
}} |
||||||
|
/> |
||||||
|
{hideRenderer && <EmptyRoadmap />} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,162 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { Check, Copy, Loader2 } from 'lucide-react'; |
||||||
|
|
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import type { AllowedRoadmapVisibility } from './CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { httpPatch } from '../../lib/http'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { useCopyText } from '../../hooks/use-copy-text'; |
||||||
|
import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap'; |
||||||
|
|
||||||
|
type ShareRoadmapModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export const allowedVisibilityLabels: { |
||||||
|
id: AllowedRoadmapVisibility; |
||||||
|
label: string; |
||||||
|
}[] = [ |
||||||
|
{ |
||||||
|
id: 'me', |
||||||
|
label: 'Only visible to me', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'public', |
||||||
|
label: 'Anyone with the link', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'team', |
||||||
|
label: 'Visible to team members', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'friends', |
||||||
|
label: 'Only friends can view', |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export function ShareRoadmapModal(props: ShareRoadmapModalProps) { |
||||||
|
const { onClose } = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
const $currentRoadmap = useStore(currentRoadmap); |
||||||
|
const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal); |
||||||
|
const roadmapId = $currentRoadmap?._id!; |
||||||
|
|
||||||
|
const { copyText, isCopied } = useCopyText(); |
||||||
|
const [visibility, setVisibility] = useState($currentRoadmap?.visibility); |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
|
||||||
|
async function updateVisibility(newVisibility: AllowedRoadmapVisibility) { |
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpPatch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-update-roadmap-visibility/${ |
||||||
|
$currentRoadmap?._id |
||||||
|
}`,
|
||||||
|
{ |
||||||
|
visibility: newVisibility, |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
console.error(error); |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
setIsLoading(false); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
toast.success('Visibility updated'); |
||||||
|
setVisibility(newVisibility); |
||||||
|
currentRoadmap.set({ |
||||||
|
...$currentRoadmap!, |
||||||
|
visibility: newVisibility, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function handleCopy() { |
||||||
|
const isDev = import.meta.env.DEV; |
||||||
|
const url = new URL( |
||||||
|
isDev ? 'http://localhost:3000/r' : 'https://roadmap.sh/r' |
||||||
|
); |
||||||
|
url.searchParams.set('id', roadmapId); |
||||||
|
copyText(url.toString()); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal onClose={onClose}> |
||||||
|
<div className="p-4 pb-0"> |
||||||
|
<h1 className="text-lg font-medium leading-5 text-gray-900"> |
||||||
|
Updating {$currentRoadmap?.title} |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul className="mt-4 border-t"> |
||||||
|
{allowedVisibilityLabels.map((v) => { |
||||||
|
if (v.id === 'team' && $isCurrentRoadmapPersonal) { |
||||||
|
return null; |
||||||
|
} else if (v.id === 'friends' && !$isCurrentRoadmapPersonal) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={v.id}> |
||||||
|
<button |
||||||
|
disabled={v.id === visibility || isLoading} |
||||||
|
key={v.id} |
||||||
|
className={cn( |
||||||
|
'relative flex w-full items-center border-b p-2.5 px-4 text-sm text-gray-700 hover:bg-gray-200 hover:text-gray-900 disabled:cursor-not-allowed', |
||||||
|
v.id === visibility && |
||||||
|
'bg-gray-900 text-white hover:bg-gray-900 hover:text-white' |
||||||
|
)} |
||||||
|
onClick={() => updateVisibility(v.id)} |
||||||
|
> |
||||||
|
{v.label} |
||||||
|
|
||||||
|
{v.id === visibility && ( |
||||||
|
<span className="absolute bottom-0 right-0 top-0 flex w-8 items-center justify-center"> |
||||||
|
<span className="h-2 w-2 rounded-full bg-green-500" /> |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div className="flex items-center justify-between p-4"> |
||||||
|
<button |
||||||
|
disabled={isLoading} |
||||||
|
className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
{isLoading ? ( |
||||||
|
<> |
||||||
|
<Loader2 size={14} className="mr-2 animate-spin stroke-[2.5]" /> |
||||||
|
Saving |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
'Cancel' |
||||||
|
)} |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800" |
||||||
|
onClick={handleCopy} |
||||||
|
> |
||||||
|
{isCopied ? ( |
||||||
|
<> |
||||||
|
<Check size={14} className="mr-2 stroke-[2.5]" /> |
||||||
|
Copied |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<Copy size={14} className="mr-2 stroke-[2.5]" /> |
||||||
|
Copy Link |
||||||
|
</> |
||||||
|
)} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
import { ExternalLinkIcon, Map, Plus } from 'lucide-react'; |
||||||
|
import RoadmapIcon from '../../icons/roadmap.svg'; |
||||||
|
import type { GetRoadmapListResponse } from './RoadmapListPage'; |
||||||
|
|
||||||
|
type GroupByCreator = { |
||||||
|
creator: GetRoadmapListResponse['sharedRoadmaps'][number]['creator']; |
||||||
|
roadmaps: GetRoadmapListResponse['sharedRoadmaps']; |
||||||
|
}; |
||||||
|
|
||||||
|
type SharedRoadmapListProps = { |
||||||
|
roadmaps: GetRoadmapListResponse['sharedRoadmaps']; |
||||||
|
}; |
||||||
|
|
||||||
|
export function SharedRoadmapList(props: SharedRoadmapListProps) { |
||||||
|
const { roadmaps: sharedRoadmaps } = props; |
||||||
|
|
||||||
|
const allUniqueCreatorIds = new Set( |
||||||
|
sharedRoadmaps.map((roadmap) => roadmap.creator.id) |
||||||
|
); |
||||||
|
|
||||||
|
const groupByCreator: GroupByCreator[] = []; |
||||||
|
for (const creatorId of allUniqueCreatorIds) { |
||||||
|
const creator = sharedRoadmaps.find( |
||||||
|
(roadmap) => roadmap.creator.id === creatorId |
||||||
|
)?.creator; |
||||||
|
if (!creator) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
groupByCreator.push({ |
||||||
|
creator, |
||||||
|
roadmaps: sharedRoadmaps.filter( |
||||||
|
(roadmap) => roadmap.creator.id === creatorId |
||||||
|
), |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if (sharedRoadmaps.length === 0) { |
||||||
|
return ( |
||||||
|
<div className="flex flex-col items-center p-4 py-20"> |
||||||
|
<Map className="mb-4 h-24 w-24 opacity-10" /> |
||||||
|
<h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3> |
||||||
|
<p className="text-base text-gray-500"> |
||||||
|
Roadmaps from your friends will appear here |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<div className="mb-3 flex items-center justify-between"> |
||||||
|
<span className={'text-sm text-gray-400'}> |
||||||
|
{sharedRoadmaps.length} shared roadmap(s) |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<ul className="grid grid-cols-1 gap-4 sm:grid-cols-2"> |
||||||
|
{groupByCreator.map((group) => { |
||||||
|
const creator = group.creator; |
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={creator.id} |
||||||
|
className="flex flex-col items-start overflow-hidden rounded-md border border-gray-300" |
||||||
|
> |
||||||
|
<div className="relative flex w-full items-center gap-3 p-3"> |
||||||
|
<img |
||||||
|
src={ |
||||||
|
creator.avatar |
||||||
|
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${ |
||||||
|
creator.avatar |
||||||
|
}` |
||||||
|
: '/images/default-avatar.png' |
||||||
|
} |
||||||
|
alt={creator.name || ''} |
||||||
|
className="h-8 w-8 rounded-full" |
||||||
|
/> |
||||||
|
<div> |
||||||
|
<h3 className="truncate font-medium">{creator.name}</h3> |
||||||
|
<p className="truncate text-sm text-gray-500"> |
||||||
|
{group?.roadmaps?.length || 0} shared roadmap(s) |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul className="w-full"> |
||||||
|
{group?.roadmaps?.map((roadmap) => { |
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={roadmap._id} |
||||||
|
className="relative flex w-full border-t" |
||||||
|
> |
||||||
|
<a |
||||||
|
href={`/r?id=${roadmap._id}`} |
||||||
|
className="group inline-grid w-full grid-cols-[auto,16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black" |
||||||
|
target={'_blank'} |
||||||
|
> |
||||||
|
<span className="w-full truncate"> |
||||||
|
{roadmap.title} |
||||||
|
</span> |
||||||
|
|
||||||
|
<ExternalLinkIcon |
||||||
|
size={16} |
||||||
|
className="opacity-20 transition-opacity group-hover:opacity-100" |
||||||
|
/> |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
export function SkeletonRoadmapHeader() { |
||||||
|
return ( |
||||||
|
<div className="border-b"> |
||||||
|
<div className="container relative py-5 sm:py-12"> |
||||||
|
<div className="mb-3 mt-0 sm:mb-4"> |
||||||
|
<div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" /> |
||||||
|
<div className="mt-0.5 h-5 w-1/3 animate-pulse rounded-md bg-gray-200 sm:h-7" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex justify-between gap-2 sm:gap-0"> |
||||||
|
<div className="h-7 w-[35.04px] sm:w-32 animate-pulse rounded-md bg-gray-300 sm:h-8" /> |
||||||
|
<div className="h-7 w-[32px] sm:w-[89.73px] animate-pulse rounded-md bg-gray-300 sm:h-8" /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border"> |
||||||
|
<div |
||||||
|
data-progress-nums-container |
||||||
|
className="striped-loader relative hidden h-8 items-center justify-between rounded-md bg-white sm:flex" |
||||||
|
/> |
||||||
|
<div |
||||||
|
data-progress-nums-container |
||||||
|
className="striped-loader relative -mb-2 flex h-[34px] items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import { type ReactNode, useRef } from 'react'; |
||||||
|
import { useOutsideClick } from '../hooks/use-outside-click'; |
||||||
|
import { useKeydown } from '../hooks/use-keydown'; |
||||||
|
import { cn } from '../lib/classname'; |
||||||
|
|
||||||
|
type ModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
children: ReactNode; |
||||||
|
bodyClassName?: string; |
||||||
|
wrapperClassName?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function Modal(props: ModalProps) { |
||||||
|
const { onClose, children, bodyClassName, wrapperClassName } = props; |
||||||
|
|
||||||
|
const popupBodyEl = useRef<HTMLDivElement>(null); |
||||||
|
|
||||||
|
useKeydown('Escape', () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
useOutsideClick(popupBodyEl, () => { |
||||||
|
onClose(); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="popup fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50"> |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'relative h-full w-full max-w-md p-4 md:h-auto', |
||||||
|
wrapperClassName |
||||||
|
)} |
||||||
|
> |
||||||
|
<div |
||||||
|
ref={popupBodyEl} |
||||||
|
className={cn( |
||||||
|
'popup-body relative h-full rounded-lg bg-white shadow', |
||||||
|
bodyClassName |
||||||
|
)} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { ChevronDown } from 'lucide-react'; |
||||||
|
import { isLoggedIn } from '../../lib/jwt'; |
||||||
|
import { AccountDropdownList } from './AccountDropdownList'; |
||||||
|
import { DropdownTeamList } from './DropdownTeamList'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
|
||||||
|
export function AccountDropdown() { |
||||||
|
const dropdownRef = useRef(null); |
||||||
|
|
||||||
|
const [showDropdown, setShowDropdown] = useState(false); |
||||||
|
const [isTeamsOpen, setIsTeamsOpen] = useState(false); |
||||||
|
|
||||||
|
useOutsideClick(dropdownRef, () => { |
||||||
|
setShowDropdown(false); |
||||||
|
setIsTeamsOpen(false); |
||||||
|
}); |
||||||
|
|
||||||
|
if (!isLoggedIn()) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative z-50 animate-fade-in"> |
||||||
|
<button |
||||||
|
className="flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600" |
||||||
|
onClick={() => { |
||||||
|
setIsTeamsOpen(false); |
||||||
|
setShowDropdown(!showDropdown); |
||||||
|
}} |
||||||
|
> |
||||||
|
<span className="inline-flex items-center"> |
||||||
|
Account <span className="text-gray-300">/</span> Teams |
||||||
|
</span> |
||||||
|
<ChevronDown className="h-4 w-4 shrink-0 stroke-[2.5px]" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
{showDropdown && ( |
||||||
|
<div |
||||||
|
ref={dropdownRef} |
||||||
|
className="absolute right-0 z-50 mt-2 min-h-[152px] w-48 rounded-md bg-slate-800 py-1 shadow-xl" |
||||||
|
> |
||||||
|
{isTeamsOpen ? ( |
||||||
|
<DropdownTeamList setIsTeamsOpen={setIsTeamsOpen} /> |
||||||
|
) : ( |
||||||
|
<AccountDropdownList setIsTeamsOpen={setIsTeamsOpen} /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,49 @@ |
|||||||
|
import { ChevronRight } from 'lucide-react'; |
||||||
|
import { logout } from './navigation'; |
||||||
|
|
||||||
|
type AccountDropdownListProps = { |
||||||
|
setIsTeamsOpen: (isOpen: boolean) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function AccountDropdownList(props: AccountDropdownListProps) { |
||||||
|
const { setIsTeamsOpen } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<ul> |
||||||
|
<li className="px-1"> |
||||||
|
<a |
||||||
|
href="/account" |
||||||
|
className="block rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
Profile |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li className="px-1"> |
||||||
|
<a |
||||||
|
href="/account/friends" |
||||||
|
className="block rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
Friends |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
<li className="px-1"> |
||||||
|
<button |
||||||
|
className="group flex w-full items-center justify-between rounded pl-4 pr-2 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
onClick={() => setIsTeamsOpen(true)} |
||||||
|
> |
||||||
|
Teams |
||||||
|
<ChevronRight className="h-4 w-4 shrink-0 stroke-[2.5px] text-slate-400 group-hover:text-white" /> |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
<li className="px-1"> |
||||||
|
<button |
||||||
|
className="block w-full rounded pl-4 pr-2 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
type="button" |
||||||
|
onClick={logout} |
||||||
|
> |
||||||
|
Logout |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,110 @@ |
|||||||
|
import { ChevronLeft, Loader2, Plus, Users } from 'lucide-react'; |
||||||
|
import { $teamList } from '../../stores/team'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import type { TeamListResponse } from '../TeamDropdown/TeamDropdown'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { Spinner } from '../ReactIcons/Spinner'; |
||||||
|
|
||||||
|
type DropdownTeamListProps = { |
||||||
|
setIsTeamsOpen: (isOpen: boolean) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function DropdownTeamList(props: DropdownTeamListProps) { |
||||||
|
const { setIsTeamsOpen } = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
const teamList = useStore($teamList); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
|
||||||
|
async function getAllTeams() { |
||||||
|
if (teamList.length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpGet<TeamListResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams` |
||||||
|
); |
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
$teamList.set(response); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getAllTeams().finally(() => setIsLoading(false)); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const loadingIndicator = isLoading && ( |
||||||
|
<div className="mt-2 flex animate-pulse flex-col gap-1 px-1 text-center"> |
||||||
|
<div className="h-[35px] rounded-md bg-gray-700"></div> |
||||||
|
<div className="h-[35px] rounded-md bg-gray-700"></div> |
||||||
|
<div className="h-[35px] rounded-md bg-gray-700"></div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className="flex items-center justify-between px-2"> |
||||||
|
<button |
||||||
|
className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50" |
||||||
|
onClick={() => setIsTeamsOpen(false)} |
||||||
|
> |
||||||
|
<ChevronLeft className="h-4 w-4 stroke-[2.5px]" /> |
||||||
|
</button> |
||||||
|
<a |
||||||
|
className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50" |
||||||
|
href="/team/new" |
||||||
|
> |
||||||
|
<Plus className="h-4 w-4 stroke-[2.5px]" /> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
|
||||||
|
{loadingIndicator} |
||||||
|
{!isLoading && ( |
||||||
|
<ul className="mt-2"> |
||||||
|
{teamList?.map((team) => { |
||||||
|
let pageLink = ''; |
||||||
|
if (team.status === 'invited') { |
||||||
|
pageLink = `/respond-invite?i=${team.memberId}`; |
||||||
|
} else if (team.status === 'joined') { |
||||||
|
pageLink = `/team/progress?t=${team._id}`; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={team._id} className="px-1"> |
||||||
|
<a |
||||||
|
href={pageLink} |
||||||
|
className="block truncate rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
{team.name} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
|
||||||
|
{teamList.length === 0 && !isLoading && ( |
||||||
|
<li className="mt-2 px-1 text-center"> |
||||||
|
<p className="block rounded px-4 py-2 text-sm font-medium text-slate-500"> |
||||||
|
<Users className="mx-auto mb-2 h-7 w-7 text-slate-600" /> |
||||||
|
No teams found.{' '} |
||||||
|
<a |
||||||
|
className="font-medium text-slate-400 underline underline-offset-2 hover:text-slate-300" |
||||||
|
href="/team/new" |
||||||
|
> |
||||||
|
Create a team |
||||||
|
</a> |
||||||
|
. |
||||||
|
</p> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
import { CheckCircle, Copy } from 'lucide-react'; |
||||||
|
import { useCopyText } from '../../hooks/use-copy-text'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
type CopyRoadmapLinkProps = { |
||||||
|
roadmapId: string; |
||||||
|
onClose: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function CopyRoadmapLink(props: CopyRoadmapLinkProps) { |
||||||
|
const { roadmapId, onClose } = props; |
||||||
|
|
||||||
|
const shareLink = `${ |
||||||
|
import.meta.env.PUBLIC_ROADMAP_WEB_URL |
||||||
|
}/r?id=${roadmapId}`;
|
||||||
|
const { copyText, isCopied } = useCopyText(); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex grow flex-col justify-center"> |
||||||
|
<div className="mt-5 flex grow flex-col items-center justify-center gap-1.5"> |
||||||
|
<CheckCircle className="h-14 w-14 text-green-500" /> |
||||||
|
<h3 className="text-xl font-medium">Sharing Settings Updated</h3> |
||||||
|
</div> |
||||||
|
|
||||||
|
<input |
||||||
|
type="text" |
||||||
|
className="mt-6 w-full rounded-md border bg-gray-50 p-2 px-2.5 text-gray-700 focus:outline-none" |
||||||
|
value={shareLink} |
||||||
|
readOnly |
||||||
|
onClick={(e) => { |
||||||
|
e.currentTarget.select(); |
||||||
|
copyText(shareLink); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<p className="mt-1 text-sm text-gray-400"> |
||||||
|
You can share the above link with anyone who has access |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="mt-4 flex flex-col items-center justify-end gap-2"> |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex w-full items-center justify-center gap-1.5 rounded bg-black px-4 py-2.5 text-sm font-medium text-white hover:opacity-80', |
||||||
|
isCopied && 'bg-green-300 text-green-800' |
||||||
|
)} |
||||||
|
disabled={isCopied} |
||||||
|
onClick={() => { |
||||||
|
copyText(shareLink); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Copy className="h-3.5 w-3.5 stroke-[2.5]" /> |
||||||
|
{isCopied ? 'Copied' : 'Copy'} |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex w-full items-center justify-center gap-1.5 rounded border border-black px-4 py-2 text-sm font-medium hover:bg-gray-100' |
||||||
|
)} |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
Close |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,160 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { UserItem } from './UserItem'; |
||||||
|
import { Users2 } from 'lucide-react'; |
||||||
|
import {httpGet} from "../../lib/http"; |
||||||
|
|
||||||
|
export type FriendshipStatus = |
||||||
|
| 'none' |
||||||
|
| 'sent' |
||||||
|
| 'received' |
||||||
|
| 'accepted' |
||||||
|
| 'rejected' |
||||||
|
| 'got_rejected'; |
||||||
|
|
||||||
|
type FriendResourceProgress = { |
||||||
|
updatedAt: string; |
||||||
|
title: string; |
||||||
|
resourceId: string; |
||||||
|
resourceType: string; |
||||||
|
learning: number; |
||||||
|
skipped: number; |
||||||
|
done: number; |
||||||
|
total: number; |
||||||
|
}; |
||||||
|
|
||||||
|
export type ListFriendsResponse = { |
||||||
|
userId: string; |
||||||
|
name: string; |
||||||
|
email: string; |
||||||
|
avatar: string; |
||||||
|
status: FriendshipStatus; |
||||||
|
roadmaps: FriendResourceProgress[]; |
||||||
|
bestPractices: FriendResourceProgress[]; |
||||||
|
}[]; |
||||||
|
|
||||||
|
type ShareFriendListProps = { |
||||||
|
setFriends: (friends: ListFriendsResponse) => void; |
||||||
|
friends: ListFriendsResponse; |
||||||
|
sharedFriendIds: string[]; |
||||||
|
setSharedFriendIds: (friendIds: string[]) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ShareFriendList(props: ShareFriendListProps) { |
||||||
|
const { setFriends, friends, sharedFriendIds, setSharedFriendIds } = props; |
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
|
||||||
|
async function loadFriends() { |
||||||
|
if (friends.length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpGet<ListFriendsResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-list-friends` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setFriends(response.filter((friend) => friend.status === 'accepted')); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadFriends().finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const loadingFriends = isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-1.5"> |
||||||
|
{[...Array(3)].map((_, idx) => ( |
||||||
|
<li |
||||||
|
key={idx} |
||||||
|
className="flex animate-pulse items-center gap-2.5 rounded-md border p-2" |
||||||
|
> |
||||||
|
<div className="relative top-[1px] h-10 w-10 shrink-0 rounded-full bg-gray-200" /> |
||||||
|
<div className="inline-grid w-full"> |
||||||
|
<div className="h-5 w-2/4 rounded bg-gray-200" /> |
||||||
|
<div className="mt-1 h-5 w-3/4 rounded bg-gray-200" /> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{(friends.length > 0 || isLoading) && ( |
||||||
|
<div className="flex items-center justify-between gap-2"> |
||||||
|
<p className="text-sm">Select Friends to share the roadmap with</p> |
||||||
|
|
||||||
|
<label className="flex items-center gap-2 text-sm"> |
||||||
|
<input |
||||||
|
type="checkbox" |
||||||
|
checked={sharedFriendIds.length === friends.length} |
||||||
|
onChange={(e) => { |
||||||
|
if (e.target.checked) { |
||||||
|
setSharedFriendIds(friends.map((f) => f.userId)); |
||||||
|
} else { |
||||||
|
setSharedFriendIds([]); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
<span className="text-sm">Select all</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{loadingFriends} |
||||||
|
{friends.length > 0 && !isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-1.5"> |
||||||
|
{friends.map((friend) => { |
||||||
|
const isSelected = sharedFriendIds?.includes(friend.userId); |
||||||
|
return ( |
||||||
|
<li key={friend.userId}> |
||||||
|
<UserItem |
||||||
|
user={{ |
||||||
|
name: friend.name, |
||||||
|
avatar: friend.avatar, |
||||||
|
email: friend.email, |
||||||
|
}} |
||||||
|
isSelected={isSelected} |
||||||
|
onClick={() => { |
||||||
|
if (isSelected) { |
||||||
|
setSharedFriendIds( |
||||||
|
sharedFriendIds.filter((id) => id !== friend.userId) |
||||||
|
); |
||||||
|
} else { |
||||||
|
setSharedFriendIds([...sharedFriendIds, friend.userId]); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
)} |
||||||
|
|
||||||
|
{friends.length === 0 && !isLoading && ( |
||||||
|
<div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center"> |
||||||
|
<Users2 className="mb-3 h-10 w-10 text-gray-300" /> |
||||||
|
<p className="font-semibold text-gray-500"> |
||||||
|
You do not have any friends yet. <br />{' '} |
||||||
|
<a |
||||||
|
target="_blank" |
||||||
|
className="underline underline-offset-2" |
||||||
|
href={`${import.meta.env.PUBLIC_ROADMAP_WEB_URL}/account/friends`} |
||||||
|
> |
||||||
|
Invite your friends to share roadmaps with. |
||||||
|
</a> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,311 @@ |
|||||||
|
import { type ReactNode, useCallback, useState } from 'react'; |
||||||
|
import { Globe2, Loader2, Lock } from 'lucide-react'; |
||||||
|
import { type ListFriendsResponse, ShareFriendList } from './ShareFriendList'; |
||||||
|
import { TransferToTeamList } from './TransferToTeamList'; |
||||||
|
import { ShareOptionTabs } from './ShareOptionsTab'; |
||||||
|
import { |
||||||
|
ShareTeamMemberList, |
||||||
|
type TeamMemberList, |
||||||
|
} from './ShareTeamMemberList'; |
||||||
|
import { CopyRoadmapLink } from './CopyRoadmapLink'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { httpPatch } from '../../lib/http'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { UserTeamItem } from '../TeamDropdown/TeamDropdown'; |
||||||
|
|
||||||
|
export type OnShareSettingsUpdate = (options: { |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
sharedTeamMemberIds: string[]; |
||||||
|
sharedFriendIds: string[]; |
||||||
|
}) => void; |
||||||
|
|
||||||
|
type ShareOptionsModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
sharedFriendIds?: string[]; |
||||||
|
sharedTeamMemberIds?: string[]; |
||||||
|
teamId?: string; |
||||||
|
roadmapId?: string; |
||||||
|
|
||||||
|
onShareSettingsUpdate: OnShareSettingsUpdate; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ShareOptionsModal(props: ShareOptionsModalProps) { |
||||||
|
const { |
||||||
|
roadmapId, |
||||||
|
onClose, |
||||||
|
visibility: defaultVisibility, |
||||||
|
sharedTeamMemberIds: defaultSharedMemberIds = [], |
||||||
|
sharedFriendIds: defaultSharedFriendIds = [], |
||||||
|
teamId, |
||||||
|
onShareSettingsUpdate, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [isSettingsUpdated, setIsSettingsUpdated] = useState(false); |
||||||
|
const [friends, setFriends] = useState<ListFriendsResponse>([]); |
||||||
|
const [teams, setTeams] = useState<UserTeamItem[]>([]); |
||||||
|
const [members, setMembers] = useState<TeamMemberList[]>([]); |
||||||
|
|
||||||
|
const [visibility, setVisibility] = useState(defaultVisibility); |
||||||
|
const [sharedTeamMemberIds, setSharedTeamMemberIds] = useState<string[]>( |
||||||
|
defaultSharedMemberIds |
||||||
|
); |
||||||
|
const [sharedFriendIds, setSharedFriendIds] = useState<string[]>( |
||||||
|
defaultSharedFriendIds |
||||||
|
); |
||||||
|
const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null); |
||||||
|
|
||||||
|
const canTransferRoadmap = visibility === 'team' && !teamId; |
||||||
|
let isUpdateDisabled = false; |
||||||
|
// Disable update button if there are no friends to share with
|
||||||
|
if (visibility === 'friends' && sharedFriendIds.length === 0) { |
||||||
|
isUpdateDisabled = true; |
||||||
|
// Disable update button if there are no team to transfer
|
||||||
|
} else if (canTransferRoadmap && !selectedTeamId) { |
||||||
|
isUpdateDisabled = true; |
||||||
|
// Disable update button if there are no members to share with
|
||||||
|
} else if ( |
||||||
|
visibility === 'team' && |
||||||
|
teamId && |
||||||
|
sharedTeamMemberIds.length === 0 |
||||||
|
) { |
||||||
|
isUpdateDisabled = true; |
||||||
|
} |
||||||
|
|
||||||
|
const handleShareChange: OnShareSettingsUpdate = async ({ |
||||||
|
sharedFriendIds, |
||||||
|
visibility, |
||||||
|
sharedTeamMemberIds, |
||||||
|
}) => { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
if (visibility === 'friends' && sharedFriendIds.length === 0) { |
||||||
|
toast.error('Please select at least one friend'); |
||||||
|
return; |
||||||
|
} else if ( |
||||||
|
visibility === 'team' && |
||||||
|
teamId && |
||||||
|
sharedTeamMemberIds.length === 0 |
||||||
|
) { |
||||||
|
toast.error('Please select at least one member'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpPatch( |
||||||
|
`${ |
||||||
|
import.meta.env.PUBLIC_API_URL |
||||||
|
}/v1-update-roadmap-visibility/${roadmapId}`,
|
||||||
|
{ |
||||||
|
visibility, |
||||||
|
sharedFriendIds, |
||||||
|
sharedTeamMemberIds, |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
setIsSettingsUpdated(true); |
||||||
|
onShareSettingsUpdate({ sharedFriendIds, visibility, sharedTeamMemberIds }); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleTransferToTeam = useCallback( |
||||||
|
async (teamId: string) => { |
||||||
|
if (!roadmapId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpPatch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-transfer-roadmap/${roadmapId}`, |
||||||
|
{ |
||||||
|
teamId, |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
setIsLoading(false); |
||||||
|
toast.error(error?.message || 'Something went wrong, please try again'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
window.location.reload(); |
||||||
|
}, |
||||||
|
[roadmapId] |
||||||
|
); |
||||||
|
|
||||||
|
if (isSettingsUpdated) { |
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={onClose} |
||||||
|
wrapperClassName="max-w-lg" |
||||||
|
bodyClassName="p-4 flex flex-col" |
||||||
|
> |
||||||
|
<CopyRoadmapLink roadmapId={roadmapId!} onClose={onClose} /> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={() => { |
||||||
|
if (isLoading) { |
||||||
|
return; |
||||||
|
} |
||||||
|
onClose(); |
||||||
|
}} |
||||||
|
wrapperClassName="max-w-3xl" |
||||||
|
bodyClassName="p-4 flex flex-col min-h-[400px]" |
||||||
|
> |
||||||
|
<div className="mb-4"> |
||||||
|
<h3 className="mb-1 text-xl font-semibold">Update Sharing Settings</h3> |
||||||
|
<p className="text-sm text-gray-500"> |
||||||
|
Pick and modify who can access this roadmap. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ShareOptionTabs |
||||||
|
visibility={visibility} |
||||||
|
setVisibility={setVisibility} |
||||||
|
teamId={teamId} |
||||||
|
onChange={(visibility) => { |
||||||
|
setSelectedTeamId(null); |
||||||
|
|
||||||
|
if (['me', 'public'].includes(visibility)) { |
||||||
|
setSharedTeamMemberIds([]); |
||||||
|
setSharedFriendIds([]); |
||||||
|
} else if (visibility === 'friends') { |
||||||
|
setSharedFriendIds( |
||||||
|
defaultSharedFriendIds.length > 0 ? defaultSharedFriendIds : [] |
||||||
|
); |
||||||
|
} else if (visibility === 'team' && teamId) { |
||||||
|
setSharedTeamMemberIds( |
||||||
|
defaultSharedMemberIds?.length > 0 ? defaultSharedMemberIds : [] |
||||||
|
); |
||||||
|
setSharedFriendIds([]); |
||||||
|
} else { |
||||||
|
setSharedFriendIds([]); |
||||||
|
setSharedTeamMemberIds([]); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<div className="mt-4 flex grow flex-col"> |
||||||
|
{visibility === 'public' && ( |
||||||
|
<div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center"> |
||||||
|
<Globe2 className="mb-3 h-10 w-10 text-gray-300" /> |
||||||
|
<p className="font-medium text-gray-500"> |
||||||
|
Anyone with the link can access. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{visibility === 'me' && ( |
||||||
|
<div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center"> |
||||||
|
<Lock className="mb-3 h-10 w-10 text-gray-300" /> |
||||||
|
<p className="font-medium text-gray-500"> |
||||||
|
Only you will be able to access. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{/* For Personal Roadmap */} |
||||||
|
{visibility === 'friends' && ( |
||||||
|
<ShareFriendList |
||||||
|
friends={friends} |
||||||
|
setFriends={setFriends} |
||||||
|
sharedFriendIds={sharedFriendIds} |
||||||
|
setSharedFriendIds={setSharedFriendIds} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{canTransferRoadmap && ( |
||||||
|
<TransferToTeamList |
||||||
|
teams={teams} |
||||||
|
setTeams={setTeams} |
||||||
|
selectedTeamId={selectedTeamId} |
||||||
|
setSelectedTeamId={setSelectedTeamId} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{/* For Team Roadmap */} |
||||||
|
{visibility === 'team' && teamId && ( |
||||||
|
<ShareTeamMemberList |
||||||
|
teamId={teamId} |
||||||
|
sharedTeamMemberIds={sharedTeamMemberIds} |
||||||
|
setSharedTeamMemberIds={setSharedTeamMemberIds} |
||||||
|
members={members} |
||||||
|
setMembers={setMembers} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-2 flex items-center justify-between gap-1.5"> |
||||||
|
<button |
||||||
|
className="flex items-center justify-center gap-1.5 rounded-md border px-3.5 py-1.5 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-75" |
||||||
|
disabled={isLoading} |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
Close |
||||||
|
</button> |
||||||
|
|
||||||
|
{canTransferRoadmap ? ( |
||||||
|
<UpdateAction |
||||||
|
disabled={isUpdateDisabled || isLoading} |
||||||
|
onClick={() => { |
||||||
|
handleTransferToTeam(selectedTeamId!).then(() => null); |
||||||
|
}} |
||||||
|
> |
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />} |
||||||
|
Transfer |
||||||
|
</UpdateAction> |
||||||
|
) : ( |
||||||
|
<UpdateAction |
||||||
|
disabled={isUpdateDisabled || isLoading} |
||||||
|
onClick={() => { |
||||||
|
handleShareChange({ |
||||||
|
visibility, |
||||||
|
sharedTeamMemberIds: |
||||||
|
visibility === 'team' ? sharedTeamMemberIds : [], |
||||||
|
sharedFriendIds: |
||||||
|
visibility === 'friends' ? sharedFriendIds : [], |
||||||
|
}); |
||||||
|
}} |
||||||
|
> |
||||||
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />} |
||||||
|
Update Sharing Settings |
||||||
|
</UpdateAction> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
function UpdateAction(props: { |
||||||
|
onClick: () => void; |
||||||
|
disabled?: boolean; |
||||||
|
children: ReactNode; |
||||||
|
className?: string; |
||||||
|
}) { |
||||||
|
const { onClick, disabled, children, className } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex min-w-[120px] items-center justify-center gap-1.5 rounded-md border border-gray-900 bg-gray-900 px-4 py-2 text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-75', |
||||||
|
disabled && 'border-gray-700 bg-gray-700 text-white hover:bg-gray-700', |
||||||
|
className |
||||||
|
)} |
||||||
|
disabled={disabled} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,129 @@ |
|||||||
|
import { |
||||||
|
ArrowLeftRight, |
||||||
|
Check, |
||||||
|
Globe2, |
||||||
|
Lock, |
||||||
|
Users, |
||||||
|
Users2, |
||||||
|
} from 'lucide-react'; |
||||||
|
import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
export const allowedVisibilityLabels: { |
||||||
|
id: AllowedRoadmapVisibility; |
||||||
|
label: string; |
||||||
|
long: string; |
||||||
|
icon: typeof Lock; |
||||||
|
}[] = [ |
||||||
|
{ |
||||||
|
id: 'me', |
||||||
|
label: 'Only me', |
||||||
|
long: 'Only visible to me', |
||||||
|
icon: Lock, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'public', |
||||||
|
label: 'Public', |
||||||
|
long: 'Anyone can view', |
||||||
|
icon: Globe2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'friends', |
||||||
|
label: 'Only friends', |
||||||
|
long: 'Only friends can view', |
||||||
|
icon: Users, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'team', |
||||||
|
label: 'Only Members', |
||||||
|
long: 'Visible to team members', |
||||||
|
icon: Users2, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
type ShareOptionTabsProps = { |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
setVisibility: (visibility: AllowedRoadmapVisibility) => void; |
||||||
|
teamId?: string; |
||||||
|
|
||||||
|
onChange: (visibility: AllowedRoadmapVisibility) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ShareOptionTabs(props: ShareOptionTabsProps) { |
||||||
|
const { visibility, setVisibility, teamId, onChange } = props; |
||||||
|
|
||||||
|
const handleClick = (visibility: AllowedRoadmapVisibility) => { |
||||||
|
setVisibility(visibility); |
||||||
|
onChange(visibility); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex justify-between"> |
||||||
|
<ul className="flex w-full items-center gap-1.5"> |
||||||
|
{allowedVisibilityLabels.map((v) => { |
||||||
|
if (v.id === 'friends' && teamId) { |
||||||
|
return null; |
||||||
|
} else if (v.id === 'team' && !teamId) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const isActive = v.id === visibility; |
||||||
|
return ( |
||||||
|
<li key={v.id}> |
||||||
|
<OptionTab |
||||||
|
label={v.label} |
||||||
|
isActive={isActive} |
||||||
|
icon={v.icon} |
||||||
|
onClick={() => { |
||||||
|
handleClick(v.id); |
||||||
|
}} |
||||||
|
/> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
{!teamId && ( |
||||||
|
<div className="grow"> |
||||||
|
<OptionTab |
||||||
|
label="Transfer to team" |
||||||
|
icon={ArrowLeftRight} |
||||||
|
isActive={visibility === 'team'} |
||||||
|
onClick={() => { |
||||||
|
handleClick('team'); |
||||||
|
}} |
||||||
|
className='border-red-300 text-red-600 hover:border-red-200 hover:bg-red-50 data-[active="true"]:border-red-600 data-[active="true"]:bg-red-600 data-[active="true"]:text-white' |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type OptionTabProps = { |
||||||
|
label: string; |
||||||
|
isActive: boolean; |
||||||
|
onClick: () => void; |
||||||
|
icon: typeof Lock; |
||||||
|
className?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
function OptionTab(props: OptionTabProps) { |
||||||
|
const { label, isActive, onClick, icon: Icon, className } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'flex items-center justify-center gap-2 rounded-md border px-3 py-2 text-sm text-black hover:border-gray-300 hover:bg-gray-100', |
||||||
|
'data-[active="true"]:border-gray-500 data-[active="true"]:bg-gray-200 data-[active="true"]:text-black', |
||||||
|
className |
||||||
|
)} |
||||||
|
data-active={isActive} |
||||||
|
disabled={isActive} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
{!isActive && <Icon className="h-4 w-4" />} |
||||||
|
{isActive && <Check className="h-4 w-4" />} |
||||||
|
<span className="whitespace-nowrap">{label}</span> |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,164 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { UserItem } from './UserItem'; |
||||||
|
import { Users } from 'lucide-react'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
|
||||||
|
const allowedRoles = ['admin', 'manager', 'member'] as const; |
||||||
|
const allowedStatus = ['invited', 'joined', 'rejected'] as const; |
||||||
|
|
||||||
|
export type AllowedMemberRoles = (typeof allowedRoles)[number]; |
||||||
|
export type AllowedMemberStatus = (typeof allowedStatus)[number]; |
||||||
|
|
||||||
|
export interface TeamMemberDocument { |
||||||
|
_id?: string; |
||||||
|
userId?: string; |
||||||
|
invitedEmail?: string; |
||||||
|
teamId: string; |
||||||
|
role: AllowedMemberRoles; |
||||||
|
status: AllowedMemberStatus; |
||||||
|
progressReminderCount: number; |
||||||
|
lastProgressReminderAt?: Date; |
||||||
|
lastResendInviteAt?: Date; |
||||||
|
resendInviteCount?: number; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
export interface TeamMemberList extends TeamMemberDocument { |
||||||
|
name: string; |
||||||
|
avatar: string; |
||||||
|
hasProgress: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
type ShareTeamMemberListProps = { |
||||||
|
teamId: string; |
||||||
|
setMembers: (members: TeamMemberList[]) => void; |
||||||
|
members: TeamMemberList[]; |
||||||
|
sharedTeamMemberIds: string[]; |
||||||
|
setSharedTeamMemberIds: (sharedTeamMemberIds: string[]) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ShareTeamMemberList(props: ShareTeamMemberListProps) { |
||||||
|
const { |
||||||
|
setMembers, |
||||||
|
members, |
||||||
|
sharedTeamMemberIds, |
||||||
|
setSharedTeamMemberIds, |
||||||
|
teamId, |
||||||
|
} = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
|
||||||
|
async function loadTeamMembers() { |
||||||
|
if (members?.length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
const { response, error } = await httpGet<TeamMemberList[]>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-member-list/${teamId}` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setMembers(response); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
loadTeamMembers().finally(() => { |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const loadingMembers = isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-2.5"> |
||||||
|
{[...Array(3)].map((_, idx) => ( |
||||||
|
<li |
||||||
|
key={idx} |
||||||
|
className="flex min-h-[62px] animate-pulse items-center gap-2 rounded-md border p-2" |
||||||
|
> |
||||||
|
<div className="h-8 w-8 shrink-0 rounded-full bg-gray-200" /> |
||||||
|
<div className="inline-grid w-full"> |
||||||
|
<div className="h-5 w-2/4 rounded bg-gray-200" /> |
||||||
|
<div className="mt-1 h-5 w-3/4 rounded bg-gray-200" /> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{(members.length > 0 || isLoading) && ( |
||||||
|
<div className="flex items-center justify-between gap-2"> |
||||||
|
<p className="text-sm">Select Members</p> |
||||||
|
|
||||||
|
<label className="flex items-center gap-2"> |
||||||
|
<input |
||||||
|
type="checkbox" |
||||||
|
checked={sharedTeamMemberIds.length === members.length} |
||||||
|
onChange={(e) => { |
||||||
|
if (e.target.checked) { |
||||||
|
setSharedTeamMemberIds(members.map((member) => member._id!)); |
||||||
|
} else { |
||||||
|
setSharedTeamMemberIds([]); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
<span className="text-sm">Select all</span> |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{loadingMembers} |
||||||
|
{members?.length > 0 && !isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-2.5"> |
||||||
|
{members?.map((member) => { |
||||||
|
const isSelected = sharedTeamMemberIds?.includes( |
||||||
|
member._id?.toString()! |
||||||
|
); |
||||||
|
return ( |
||||||
|
<li key={member.userId}> |
||||||
|
<UserItem |
||||||
|
user={{ |
||||||
|
name: member.name, |
||||||
|
avatar: member.avatar, |
||||||
|
email: member.invitedEmail!, |
||||||
|
}} |
||||||
|
isSelected={isSelected} |
||||||
|
onClick={() => { |
||||||
|
if (isSelected) { |
||||||
|
setSharedTeamMemberIds( |
||||||
|
sharedTeamMemberIds.filter( |
||||||
|
(id) => id !== member._id?.toString()! |
||||||
|
) |
||||||
|
); |
||||||
|
} else { |
||||||
|
setSharedTeamMemberIds([ |
||||||
|
...sharedTeamMemberIds, |
||||||
|
member._id?.toString()!, |
||||||
|
]); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
)} |
||||||
|
|
||||||
|
{members.length === 0 && !isLoading && ( |
||||||
|
<div className="flex grow flex-col items-center justify-center gap-2"> |
||||||
|
<Users className="h-12 w-12 text-gray-500" /> |
||||||
|
<p className="text-gray-500">No members have been added yet.</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,114 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { Users2 } from 'lucide-react'; |
||||||
|
import { httpGet } from '../../lib/http'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { UserTeamItem } from '../TeamDropdown/TeamDropdown'; |
||||||
|
|
||||||
|
type TransferToTeamListProps = { |
||||||
|
teams: UserTeamItem[]; |
||||||
|
setTeams: (teams: UserTeamItem[]) => void; |
||||||
|
|
||||||
|
selectedTeamId: string | null; |
||||||
|
setSelectedTeamId: (teamId: string | null) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function TransferToTeamList(props: TransferToTeamListProps) { |
||||||
|
const { teams, setTeams, selectedTeamId, setSelectedTeamId } = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
|
||||||
|
async function getAllTeams() { |
||||||
|
if (teams.length > 0) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpGet<UserTeamItem[]>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams` |
||||||
|
); |
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTeams( |
||||||
|
response.filter((team) => ['admin', 'manager'].includes(team.role)) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
getAllTeams().finally(() => setIsLoading(false)); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const loadingTeams = isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-1.5"> |
||||||
|
{[...Array(3)].map((_, index) => ( |
||||||
|
<li key={index}> |
||||||
|
<div className="relative flex w-full items-center gap-2 rounded-md border p-2"> |
||||||
|
<div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-gray-200" /> |
||||||
|
<div className="inline-grid w-full"> |
||||||
|
<div className="h-4 animate-pulse rounded bg-gray-200" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{(teams.length > 0 || isLoading) && ( |
||||||
|
<p className="text-sm">Select a team to transfer this roadmap to</p> |
||||||
|
)} |
||||||
|
|
||||||
|
{loadingTeams} |
||||||
|
{teams.length > 0 && !isLoading && ( |
||||||
|
<ul className="mt-2 grid grid-cols-3 gap-1.5"> |
||||||
|
{teams.map((team) => { |
||||||
|
const isSelected = team._id === selectedTeamId; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li key={team._id}> |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'relative flex w-full items-center gap-2.5 rounded-lg border p-2.5', |
||||||
|
isSelected && 'border-gray-500 bg-gray-100 text-black' |
||||||
|
)} |
||||||
|
onClick={() => { |
||||||
|
setSelectedTeamId(team._id); |
||||||
|
}} |
||||||
|
> |
||||||
|
<img |
||||||
|
src={ |
||||||
|
team.avatar |
||||||
|
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${ |
||||||
|
team.avatar |
||||||
|
}` |
||||||
|
: '/images/default-avatar.png' |
||||||
|
} |
||||||
|
alt={team.name || ''} |
||||||
|
className="h-6 w-6 shrink-0 rounded-full" |
||||||
|
/> |
||||||
|
<div className="inline-grid w-full"> |
||||||
|
<h3 className="truncate text-left font-normal"> |
||||||
|
{team.name} |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
)} |
||||||
|
|
||||||
|
{teams.length === 0 && !isLoading && ( |
||||||
|
<div className="flex grow flex-col items-center justify-center gap-2"> |
||||||
|
<Users2 className="h-12 w-12 text-gray-500" /> |
||||||
|
<p className="text-gray-500">You are not a member of any team.</p> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
|
||||||
|
type UserItemProps = { |
||||||
|
user: { |
||||||
|
name: string; |
||||||
|
email: string; |
||||||
|
avatar: string; |
||||||
|
}; |
||||||
|
onClick: () => void; |
||||||
|
isSelected: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
export function UserItem(props: UserItemProps) { |
||||||
|
const { user, onClick, isSelected } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className={cn( |
||||||
|
'relative flex w-full items-center gap-2.5 rounded-lg border p-2.5', |
||||||
|
isSelected && 'border-gray-500 bg-gray-300 text-black' |
||||||
|
)} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
<img |
||||||
|
src={ |
||||||
|
user.avatar |
||||||
|
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}` |
||||||
|
: '/images/default-avatar.png' |
||||||
|
} |
||||||
|
alt={user.name || ''} |
||||||
|
className="relative top-[1px] h-10 w-10 shrink-0 rounded-full" |
||||||
|
/> |
||||||
|
<div className="inline-grid w-full"> |
||||||
|
<h3 className="truncate text-left font-semibold">{user.name}</h3> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
'truncate text-left text-sm text-gray-500', |
||||||
|
isSelected && 'text-gray-700' |
||||||
|
)} |
||||||
|
> |
||||||
|
{user.email} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export function CustomTeamRoadmap() { |
||||||
|
return null; |
||||||
|
} |
||||||
@ -0,0 +1,3 @@ |
|||||||
|
export function DefaultTeamRoadmap() { |
||||||
|
return null; |
||||||
|
} |
||||||
@ -1,346 +0,0 @@ |
|||||||
import { getUrlParams } from '../lib/browser'; |
|
||||||
import { useEffect, useState } from 'react'; |
|
||||||
import type { TeamDocument } from './CreateTeam/CreateTeamForm'; |
|
||||||
import type { TeamResourceConfig } from './CreateTeam/RoadmapSelector'; |
|
||||||
import { httpGet, httpPut } from '../lib/http'; |
|
||||||
import { pageProgressMessage } from '../stores/page'; |
|
||||||
import ExternalLinkIcon from '../icons/external-link.svg'; |
|
||||||
import RoadmapIcon from '../icons/roadmap.svg'; |
|
||||||
import PlusIcon from '../icons/plus.svg'; |
|
||||||
import type { PageType } from './CommandMenu/CommandMenu'; |
|
||||||
import { UpdateTeamResourceModal } from './CreateTeam/UpdateTeamResourceModal'; |
|
||||||
import { useStore } from '@nanostores/react'; |
|
||||||
import { $canManageCurrentTeam } from '../stores/team'; |
|
||||||
import { useToast } from '../hooks/use-toast'; |
|
||||||
import { SelectRoadmapModal } from './CreateTeam/SelectRoadmapModal'; |
|
||||||
|
|
||||||
export function TeamRoadmaps() { |
|
||||||
const { t: teamId } = getUrlParams(); |
|
||||||
|
|
||||||
const canManageCurrentTeam = useStore($canManageCurrentTeam); |
|
||||||
|
|
||||||
const toast = useToast(); |
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(true); |
|
||||||
const [removingRoadmapId, setRemovingRoadmapId] = useState<string>(''); |
|
||||||
const [isAddingRoadmap, setIsAddingRoadmap] = useState(false); |
|
||||||
const [changingRoadmapId, setChangingRoadmapId] = useState<string>(''); |
|
||||||
const [team, setTeam] = useState<TeamDocument>(); |
|
||||||
const [resourceConfigs, setResourceConfigs] = useState<TeamResourceConfig>( |
|
||||||
[] |
|
||||||
); |
|
||||||
const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]); |
|
||||||
|
|
||||||
async function loadAllRoadmaps() { |
|
||||||
const { error, response } = await httpGet<PageType[]>(`/pages.json`); |
|
||||||
|
|
||||||
if (error) { |
|
||||||
toast.error(error.message || 'Something went wrong'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
if (!response) { |
|
||||||
return []; |
|
||||||
} |
|
||||||
|
|
||||||
const allRoadmaps = response |
|
||||||
.filter((page) => page.group === 'Roadmaps') |
|
||||||
.sort((a, b) => { |
|
||||||
if (a.title === 'Android') return 1; |
|
||||||
return a.title.localeCompare(b.title); |
|
||||||
}); |
|
||||||
|
|
||||||
setAllRoadmaps(allRoadmaps); |
|
||||||
return response; |
|
||||||
} |
|
||||||
|
|
||||||
async function loadTeam(teamIdToFetch: string) { |
|
||||||
const { response, error } = await httpGet<TeamDocument>( |
|
||||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}` |
|
||||||
); |
|
||||||
|
|
||||||
if (error || !response) { |
|
||||||
toast.error('Error loading team'); |
|
||||||
window.location.href = '/account'; |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
setTeam(response); |
|
||||||
} |
|
||||||
|
|
||||||
async function loadTeamResourceConfig(teamId: string) { |
|
||||||
const { error, response } = await httpGet<TeamResourceConfig>( |
|
||||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}` |
|
||||||
); |
|
||||||
if (error || !Array.isArray(response)) { |
|
||||||
console.error(error); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
setResourceConfigs(response); |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (!teamId) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
setIsLoading(true); |
|
||||||
Promise.all([ |
|
||||||
loadTeam(teamId), |
|
||||||
loadTeamResourceConfig(teamId), |
|
||||||
loadAllRoadmaps(), |
|
||||||
]).finally(() => { |
|
||||||
pageProgressMessage.set(''); |
|
||||||
setIsLoading(false); |
|
||||||
}); |
|
||||||
}, [teamId]); |
|
||||||
|
|
||||||
async function deleteResource(roadmapId: string) { |
|
||||||
if (!team?._id) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
toast.loading('Deleting roadmap'); |
|
||||||
pageProgressMessage.set(`Deleting roadmap from team`); |
|
||||||
const { error, response } = await httpPut<TeamResourceConfig>( |
|
||||||
`${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${ |
|
||||||
team._id |
|
||||||
}`,
|
|
||||||
{ |
|
||||||
resourceId: roadmapId, |
|
||||||
resourceType: 'roadmap', |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
if (error || !response) { |
|
||||||
toast.error(error?.message || 'Something went wrong'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
toast.success('Roadmap removed'); |
|
||||||
setResourceConfigs(response); |
|
||||||
} |
|
||||||
|
|
||||||
async function onAdd(roadmapId: string) { |
|
||||||
if (!teamId) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
toast.loading('Adding roadmap'); |
|
||||||
pageProgressMessage.set('Adding roadmap'); |
|
||||||
setIsLoading(true); |
|
||||||
const { error, response } = await httpPut<TeamResourceConfig>( |
|
||||||
`${ |
|
||||||
import.meta.env.PUBLIC_API_URL |
|
||||||
}/v1-update-team-resource-config/${teamId}`,
|
|
||||||
{ |
|
||||||
teamId: teamId, |
|
||||||
resourceId: roadmapId, |
|
||||||
resourceType: 'roadmap', |
|
||||||
removed: [], |
|
||||||
} |
|
||||||
); |
|
||||||
|
|
||||||
if (error || !response) { |
|
||||||
toast.error(error?.message || 'Error adding roadmap'); |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
setResourceConfigs(response); |
|
||||||
toast.success('Roadmap added'); |
|
||||||
} |
|
||||||
|
|
||||||
async function onRemove(resourceId: string) { |
|
||||||
pageProgressMessage.set('Removing roadmap'); |
|
||||||
|
|
||||||
deleteResource(resourceId).finally(() => { |
|
||||||
pageProgressMessage.set(''); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
if (!team) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
const addRoadmapModal = isAddingRoadmap && ( |
|
||||||
<SelectRoadmapModal |
|
||||||
onClose={() => setIsAddingRoadmap(false)} |
|
||||||
teamResourceConfig={resourceConfigs} |
|
||||||
allRoadmaps={allRoadmaps} |
|
||||||
teamId={teamId} |
|
||||||
onRoadmapAdd={(roadmapId) => { |
|
||||||
onAdd(roadmapId).finally(() => { |
|
||||||
pageProgressMessage.set(''); |
|
||||||
}); |
|
||||||
}} |
|
||||||
onRoadmapRemove={(roadmapId) => { |
|
||||||
if (confirm('Are you sure you want to remove this roadmap?')) { |
|
||||||
onRemove(roadmapId).finally(() => {}); |
|
||||||
} |
|
||||||
}} |
|
||||||
/> |
|
||||||
); |
|
||||||
|
|
||||||
if (resourceConfigs.length === 0 && !isLoading) { |
|
||||||
return ( |
|
||||||
<div className="flex flex-col items-center p-4 py-20"> |
|
||||||
{addRoadmapModal} |
|
||||||
<img |
|
||||||
alt="roadmap" |
|
||||||
src={RoadmapIcon.src} |
|
||||||
className="mb-4 h-24 w-24 opacity-10" |
|
||||||
/> |
|
||||||
<h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3> |
|
||||||
<p className="text-base text-gray-500"> |
|
||||||
{canManageCurrentTeam |
|
||||||
? 'Add a roadmap to start tracking your team' |
|
||||||
: 'Ask your team admin to add some roadmaps'} |
|
||||||
</p> |
|
||||||
|
|
||||||
{canManageCurrentTeam && ( |
|
||||||
<button |
|
||||||
className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900" |
|
||||||
onClick={() => setIsAddingRoadmap(true)} |
|
||||||
> |
|
||||||
Add roadmap |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
{addRoadmapModal} |
|
||||||
<div className="mb-3 flex items-center justify-between"> |
|
||||||
<span className={'text-gray-400'}> |
|
||||||
{resourceConfigs.length} roadmap(s) selected |
|
||||||
</span> |
|
||||||
{canManageCurrentTeam && ( |
|
||||||
<button |
|
||||||
className="flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-gray-500 underline hover:bg-gray-100 hover:text-gray-900" |
|
||||||
onClick={() => setIsAddingRoadmap(true)} |
|
||||||
> |
|
||||||
Add / Remove Roadmaps |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
<div className={'grid grid-cols-1 gap-3 sm:grid-cols-2'}> |
|
||||||
{changingRoadmapId && ( |
|
||||||
<UpdateTeamResourceModal |
|
||||||
onClose={() => setChangingRoadmapId('')} |
|
||||||
resourceId={changingRoadmapId} |
|
||||||
resourceType={'roadmap'} |
|
||||||
teamId={team?._id!} |
|
||||||
setTeamResourceConfig={setResourceConfigs} |
|
||||||
defaultRemovedItems={ |
|
||||||
resourceConfigs.find((c) => c.resourceId === changingRoadmapId) |
|
||||||
?.removed || [] |
|
||||||
} |
|
||||||
/> |
|
||||||
)} |
|
||||||
|
|
||||||
{resourceConfigs.map((resourceConfig) => { |
|
||||||
const { resourceId, removed: removedTopics } = resourceConfig; |
|
||||||
const roadmapTitle = |
|
||||||
allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title || |
|
||||||
'...'; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div key={resourceId} className="flex flex-col items-start rounded-md border border-gray-300"> |
|
||||||
<div className={'w-full px-3 py-4'}> |
|
||||||
<a |
|
||||||
href={`/${resourceId}?t=${teamId}`} |
|
||||||
className="group mb-0.5 flex items-center justify-between text-base font-medium leading-none text-black" |
|
||||||
target={'_blank'} |
|
||||||
> |
|
||||||
{roadmapTitle} |
|
||||||
|
|
||||||
<img |
|
||||||
alt={'link'} |
|
||||||
src={ExternalLinkIcon.src} |
|
||||||
className="ml-2 h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100" |
|
||||||
/> |
|
||||||
</a> |
|
||||||
{removedTopics.length > 0 ? ( |
|
||||||
<span className={'text-xs leading-none text-gray-900'}> |
|
||||||
{removedTopics.length} topic |
|
||||||
{removedTopics.length > 1 ? 's' : ''} removed |
|
||||||
</span> |
|
||||||
) : ( |
|
||||||
<span className="text-xs italic leading-none text-gray-400/60"> |
|
||||||
No changes made .. |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
|
|
||||||
{canManageCurrentTeam && ( |
|
||||||
<div className={'flex w-full justify-between px-3 pb-3 pt-2'}> |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
'text-xs text-gray-500 underline hover:text-black focus:outline-none' |
|
||||||
} |
|
||||||
onClick={() => { |
|
||||||
setRemovingRoadmapId(''); |
|
||||||
setChangingRoadmapId(resourceId); |
|
||||||
}} |
|
||||||
> |
|
||||||
Customize |
|
||||||
</button> |
|
||||||
|
|
||||||
{removingRoadmapId !== resourceId && ( |
|
||||||
<button |
|
||||||
type="button" |
|
||||||
className={ |
|
||||||
'text-xs text-red-500 underline hover:text-black focus:outline-none disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-red-500' |
|
||||||
} |
|
||||||
onClick={() => setRemovingRoadmapId(resourceId)} |
|
||||||
> |
|
||||||
Remove |
|
||||||
</button> |
|
||||||
)} |
|
||||||
|
|
||||||
{removingRoadmapId === resourceId && ( |
|
||||||
<span className="text-xs"> |
|
||||||
Are you sure?{' '} |
|
||||||
<button |
|
||||||
onClick={() => onRemove(resourceId)} |
|
||||||
className="mx-0.5 text-red-500 underline underline-offset-1" |
|
||||||
> |
|
||||||
Yes |
|
||||||
</button>{' '} |
|
||||||
<button |
|
||||||
onClick={() => setRemovingRoadmapId('')} |
|
||||||
className="text-red-500 underline underline-offset-1" |
|
||||||
> |
|
||||||
No |
|
||||||
</button> |
|
||||||
</span> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
})} |
|
||||||
|
|
||||||
{canManageCurrentTeam && ( |
|
||||||
<button |
|
||||||
onClick={() => setIsAddingRoadmap(true)} |
|
||||||
className="group flex min-h-[110px] flex-col items-center justify-center rounded-md border border-dashed border-gray-300 transition-colors hover:border-gray-600 hover:bg-gray-50" |
|
||||||
> |
|
||||||
<img |
|
||||||
alt="add" |
|
||||||
src={PlusIcon.src} |
|
||||||
className="mb-1 h-6 w-6 opacity-20 transition-opacity group-hover:opacity-100" |
|
||||||
/> |
|
||||||
<span className="text-sm text-gray-400 transition-colors focus:outline-none group-hover:text-black"> |
|
||||||
Add Roadmap |
|
||||||
</span> |
|
||||||
</button> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
@ -0,0 +1,39 @@ |
|||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { Map, Shapes } from 'lucide-react'; |
||||||
|
|
||||||
|
type PickRoadmapOptionModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
showDefaultRoadmapsModal: () => void; |
||||||
|
showCreateCustomRoadmapModal: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function PickRoadmapOptionModal(props: PickRoadmapOptionModalProps) { |
||||||
|
const { onClose, showDefaultRoadmapsModal, showCreateCustomRoadmapModal } = |
||||||
|
props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal onClose={onClose} bodyClassName="p-4"> |
||||||
|
<h2 className="mb-0.5 text-left text-2xl font-semibold">Pick an Option</h2> |
||||||
|
<p className="text-left text-sm text-gray-500 mb-4"> |
||||||
|
Choose from default roadmaps or create from scratch. |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="flex flex-col gap-2"> |
||||||
|
<button |
||||||
|
className="text-base flex items-center rounded-md border border-gray-300 p-2 px-4 text-left font-medium hover:bg-gray-100" |
||||||
|
onClick={showDefaultRoadmapsModal} |
||||||
|
> |
||||||
|
<Map className="mr-2 inline-block" size={20} /> |
||||||
|
Use a Default Roadmap |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="text-base flex items-center rounded-md border border-gray-300 p-2 px-4 text-left font-medium hover:bg-gray-100" |
||||||
|
onClick={showCreateCustomRoadmapModal} |
||||||
|
> |
||||||
|
<Shapes className="mr-2 inline-block" size={20} /> |
||||||
|
Create from Scratch |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
import MoreIcon from '../../icons/more-vertical.svg'; |
||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||||
|
import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react'; |
||||||
|
|
||||||
|
type RoadmapActionDropdownProps = { |
||||||
|
onDelete?: () => void; |
||||||
|
onCustomize?: () => void; |
||||||
|
onUpdateSharing?: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) { |
||||||
|
const { onDelete, onUpdateSharing, onCustomize } = props; |
||||||
|
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null); |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
|
||||||
|
useOutsideClick(menuRef, () => { |
||||||
|
setIsOpen(false); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative"> |
||||||
|
<button |
||||||
|
disabled={false} |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex" |
||||||
|
> |
||||||
|
<img alt="menu" src={MoreIcon.src} className="h-4 w-4" /> |
||||||
|
</button> |
||||||
|
<button |
||||||
|
disabled={false} |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden" |
||||||
|
> |
||||||
|
<MoreVertical size={14} /> |
||||||
|
Options |
||||||
|
</button> |
||||||
|
|
||||||
|
{isOpen && ( |
||||||
|
<div |
||||||
|
ref={menuRef} |
||||||
|
className="align-right absolute right-auto top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md sm:right-0" |
||||||
|
> |
||||||
|
<ul> |
||||||
|
{onUpdateSharing && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onUpdateSharing(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Lock size={14} className="mr-2" /> |
||||||
|
Sharing |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onCustomize && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onCustomize(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Shapes size={14} className="mr-2" /> |
||||||
|
Customize |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
{onDelete && ( |
||||||
|
<li> |
||||||
|
<button |
||||||
|
onClick={() => { |
||||||
|
setIsOpen(false); |
||||||
|
onDelete(); |
||||||
|
}} |
||||||
|
className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" |
||||||
|
> |
||||||
|
<Trash2 size={14} className="mr-2" /> |
||||||
|
Delete |
||||||
|
</button> |
||||||
|
</li> |
||||||
|
)} |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,636 @@ |
|||||||
|
import { getUrlParams } from '../../lib/browser'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import type { TeamDocument } from '../CreateTeam/CreateTeamForm'; |
||||||
|
import type { TeamResourceConfig } from '../CreateTeam/RoadmapSelector'; |
||||||
|
import { httpGet, httpPut } from '../../lib/http'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import RoadmapIcon from '../../icons/roadmap.svg'; |
||||||
|
import type { PageType } from '../CommandMenu/CommandMenu'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { $canManageCurrentTeam } from '../../stores/team'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import { SelectRoadmapModal } from '../CreateTeam/SelectRoadmapModal'; |
||||||
|
import { PickRoadmapOptionModal } from '../TeamRoadmaps/PickRoadmapOptionModal'; |
||||||
|
import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
import { |
||||||
|
ExternalLink, |
||||||
|
Globe, |
||||||
|
LockIcon, |
||||||
|
type LucideIcon, |
||||||
|
Package, |
||||||
|
PackageMinus, |
||||||
|
PenSquare, |
||||||
|
Shapes, |
||||||
|
Users, |
||||||
|
} from 'lucide-react'; |
||||||
|
import { RoadmapActionDropdown } from './RoadmapActionDropdown'; |
||||||
|
import { UpdateTeamResourceModal } from '../CreateTeam/UpdateTeamResourceModal'; |
||||||
|
import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal'; |
||||||
|
|
||||||
|
export function TeamRoadmaps() { |
||||||
|
const { t: teamId } = getUrlParams(); |
||||||
|
|
||||||
|
const canManageCurrentTeam = useStore($canManageCurrentTeam); |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(true); |
||||||
|
const [isPickingOptions, setIsPickingOptions] = useState(false); |
||||||
|
const [isAddingRoadmap, setIsAddingRoadmap] = useState(false); |
||||||
|
const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false); |
||||||
|
const [changingRoadmapId, setChangingRoadmapId] = useState<string>(''); |
||||||
|
const [team, setTeam] = useState<TeamDocument>(); |
||||||
|
const [teamResources, setTeamResources] = useState<TeamResourceConfig>([]); |
||||||
|
const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]); |
||||||
|
const [selectedResource, setSelectedResource] = useState< |
||||||
|
TeamResourceConfig[0] | null |
||||||
|
>(null); |
||||||
|
|
||||||
|
async function loadAllRoadmaps() { |
||||||
|
const { error, response } = await httpGet<PageType[]>(`/pages.json`); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
toast.error(error.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (!response) { |
||||||
|
return []; |
||||||
|
} |
||||||
|
|
||||||
|
const allRoadmaps = response |
||||||
|
.filter((page) => page.group === 'Roadmaps') |
||||||
|
.sort((a, b) => { |
||||||
|
if (a.title === 'Android') return 1; |
||||||
|
return a.title.localeCompare(b.title); |
||||||
|
}); |
||||||
|
|
||||||
|
setAllRoadmaps(allRoadmaps); |
||||||
|
return response; |
||||||
|
} |
||||||
|
|
||||||
|
async function loadTeam(teamIdToFetch: string) { |
||||||
|
const { response, error } = await httpGet<TeamDocument>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}` |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error('Error loading team'); |
||||||
|
window.location.href = '/account'; |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTeam(response); |
||||||
|
} |
||||||
|
|
||||||
|
async function loadTeamResourceConfig(teamId: string) { |
||||||
|
const { error, response } = await httpGet<TeamResourceConfig>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}` |
||||||
|
); |
||||||
|
if (error || !Array.isArray(response)) { |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTeamResources(response); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!teamId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsLoading(true); |
||||||
|
Promise.all([ |
||||||
|
loadTeam(teamId), |
||||||
|
loadTeamResourceConfig(teamId), |
||||||
|
loadAllRoadmaps(), |
||||||
|
]).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
setIsLoading(false); |
||||||
|
}); |
||||||
|
}, [teamId]); |
||||||
|
|
||||||
|
async function deleteResource(roadmapId: string) { |
||||||
|
if (!team?._id) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.loading('Deleting roadmap'); |
||||||
|
pageProgressMessage.set(`Deleting roadmap from team`); |
||||||
|
const { error, response } = await httpPut<TeamResourceConfig>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-delete-team-resource-config/${ |
||||||
|
team._id |
||||||
|
}`,
|
||||||
|
{ |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Something went wrong'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.success('Roadmap removed'); |
||||||
|
setTeamResources(response); |
||||||
|
} |
||||||
|
|
||||||
|
async function onAdd(roadmapId: string) { |
||||||
|
if (!teamId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
toast.loading('Adding roadmap'); |
||||||
|
pageProgressMessage.set('Adding roadmap'); |
||||||
|
setIsLoading(true); |
||||||
|
const { error, response } = await httpPut<TeamResourceConfig>( |
||||||
|
`${ |
||||||
|
import.meta.env.PUBLIC_API_URL |
||||||
|
}/v1-update-team-resource-config/${teamId}`,
|
||||||
|
{ |
||||||
|
teamId: teamId, |
||||||
|
resourceId: roadmapId, |
||||||
|
resourceType: 'roadmap', |
||||||
|
removed: [], |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Error adding roadmap'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setTeamResources(response); |
||||||
|
toast.success('Roadmap added'); |
||||||
|
} |
||||||
|
|
||||||
|
async function onRemove(resourceId: string) { |
||||||
|
pageProgressMessage.set('Removing roadmap'); |
||||||
|
|
||||||
|
deleteResource(resourceId).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
function handleCustomRoadmapCreated(event: Event) { |
||||||
|
const { roadmapId } = (event as CustomEvent)?.detail; |
||||||
|
if (!roadmapId) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
loadAllRoadmaps().finally(() => {}); |
||||||
|
onAdd(roadmapId).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
} |
||||||
|
window.addEventListener( |
||||||
|
'custom-roadmap-created', |
||||||
|
handleCustomRoadmapCreated |
||||||
|
); |
||||||
|
|
||||||
|
return () => { |
||||||
|
window.removeEventListener( |
||||||
|
'custom-roadmap-created', |
||||||
|
handleCustomRoadmapCreated |
||||||
|
); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
if (!team) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
const pickRoadmapOptionModal = isPickingOptions && ( |
||||||
|
<PickRoadmapOptionModal |
||||||
|
onClose={() => setIsPickingOptions(false)} |
||||||
|
showDefaultRoadmapsModal={() => { |
||||||
|
setIsAddingRoadmap(true); |
||||||
|
setIsPickingOptions(false); |
||||||
|
}} |
||||||
|
showCreateCustomRoadmapModal={() => { |
||||||
|
setIsCreatingRoadmap(true); |
||||||
|
setIsPickingOptions(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const addRoadmapModal = isAddingRoadmap && ( |
||||||
|
<SelectRoadmapModal |
||||||
|
onClose={() => setIsAddingRoadmap(false)} |
||||||
|
teamResourceConfig={teamResources} |
||||||
|
allRoadmaps={allRoadmaps} |
||||||
|
teamId={teamId} |
||||||
|
onRoadmapAdd={(roadmapId: string) => { |
||||||
|
onAdd(roadmapId).finally(() => { |
||||||
|
pageProgressMessage.set(''); |
||||||
|
}); |
||||||
|
}} |
||||||
|
onRoadmapRemove={(roadmapId: string) => { |
||||||
|
if (confirm('Are you sure you want to remove this roadmap?')) { |
||||||
|
onRemove(roadmapId).finally(() => {}); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const createRoadmapModal = isCreatingRoadmap && ( |
||||||
|
<CreateRoadmapModal |
||||||
|
teamId={teamId} |
||||||
|
onClose={() => { |
||||||
|
setIsCreatingRoadmap(false); |
||||||
|
}} |
||||||
|
onCreated={() => { |
||||||
|
loadTeamResourceConfig(teamId).finally(() => null); |
||||||
|
setIsCreatingRoadmap(false); |
||||||
|
}} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const placeholderRoadmaps = teamResources.filter( |
||||||
|
(c: TeamResourceConfig[0]) => c.isCustomResource && !c.topics |
||||||
|
); |
||||||
|
const customRoadmaps = teamResources.filter( |
||||||
|
(c: TeamResourceConfig[0]) => c.isCustomResource && c.topics |
||||||
|
); |
||||||
|
const defaultRoadmaps = teamResources.filter( |
||||||
|
(c: TeamResourceConfig[0]) => !c.isCustomResource |
||||||
|
); |
||||||
|
|
||||||
|
const hasRoadmaps = |
||||||
|
customRoadmaps.length > 0 || |
||||||
|
defaultRoadmaps.length > 0 || |
||||||
|
(placeholderRoadmaps.length > 0 && canManageCurrentTeam); |
||||||
|
if (!hasRoadmaps && !isLoading) { |
||||||
|
return ( |
||||||
|
<div className="flex flex-col items-center p-4 py-20"> |
||||||
|
{pickRoadmapOptionModal} |
||||||
|
{addRoadmapModal} |
||||||
|
{createRoadmapModal} |
||||||
|
|
||||||
|
<img |
||||||
|
alt="roadmap" |
||||||
|
src={RoadmapIcon.src} |
||||||
|
className="mb-4 h-24 w-24 opacity-10" |
||||||
|
/> |
||||||
|
<h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3> |
||||||
|
<p className="text-base text-gray-500"> |
||||||
|
{canManageCurrentTeam |
||||||
|
? 'Add a roadmap to start tracking your team' |
||||||
|
: 'Ask your team admin to add some roadmaps'} |
||||||
|
</p> |
||||||
|
|
||||||
|
{canManageCurrentTeam && ( |
||||||
|
<button |
||||||
|
className="mt-4 rounded-lg bg-black px-4 py-2 font-medium text-white hover:bg-gray-900" |
||||||
|
onClick={() => setIsPickingOptions(true)} |
||||||
|
> |
||||||
|
Add roadmap |
||||||
|
</button> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const customizeRoadmapModal = changingRoadmapId && ( |
||||||
|
<UpdateTeamResourceModal |
||||||
|
onClose={() => setChangingRoadmapId('')} |
||||||
|
resourceId={changingRoadmapId} |
||||||
|
resourceType={'roadmap'} |
||||||
|
teamId={team?._id!} |
||||||
|
setTeamResourceConfig={setTeamResources} |
||||||
|
defaultRemovedItems={ |
||||||
|
defaultRoadmaps.find((c) => c.resourceId === changingRoadmapId) |
||||||
|
?.removed || [] |
||||||
|
} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
const shareSettingsModal = selectedResource && ( |
||||||
|
<ShareOptionsModal |
||||||
|
visibility={selectedResource.visibility!} |
||||||
|
sharedTeamMemberIds={selectedResource.sharedTeamMemberIds!} |
||||||
|
sharedFriendIds={selectedResource.sharedFriendIds!} |
||||||
|
teamId={teamId} |
||||||
|
roadmapId={selectedResource.resourceId} |
||||||
|
onShareSettingsUpdate={(shareSettings) => { |
||||||
|
setTeamResources((prev) => { |
||||||
|
return prev.map((c) => { |
||||||
|
if (c.resourceId !== selectedResource.resourceId) { |
||||||
|
return c; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
...c, |
||||||
|
...shareSettings, |
||||||
|
}; |
||||||
|
}); |
||||||
|
}); |
||||||
|
}} |
||||||
|
onClose={() => setSelectedResource(null)} |
||||||
|
/> |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{pickRoadmapOptionModal} |
||||||
|
{addRoadmapModal} |
||||||
|
{createRoadmapModal} |
||||||
|
{customizeRoadmapModal} |
||||||
|
{shareSettingsModal} |
||||||
|
|
||||||
|
{canManageCurrentTeam && placeholderRoadmaps.length > 0 && ( |
||||||
|
<div className="mb-5"> |
||||||
|
<div className="mb-2 flex items-center justify-between"> |
||||||
|
<h3 className="flex w-full items-center justify-between text-xs uppercase text-gray-400"> |
||||||
|
<span className="flex">Placeholder Roadmaps</span> |
||||||
|
<span className="normal-case"> |
||||||
|
Total {placeholderRoadmaps.length} roadmap(s) |
||||||
|
</span> |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col divide-y rounded-md border"> |
||||||
|
{placeholderRoadmaps.map( |
||||||
|
(resourceConfig: TeamResourceConfig[0]) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_173px]" |
||||||
|
key={resourceConfig.resourceId} |
||||||
|
> |
||||||
|
<div className="mb-3 grid sm:mb-0"> |
||||||
|
<p className="mb-1.5 truncate text-base font-medium leading-tight text-black"> |
||||||
|
{resourceConfig.title} |
||||||
|
</p> |
||||||
|
<span className="text-xs italic leading-none text-gray-400/60"> |
||||||
|
Placeholder roadmap |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
{canManageCurrentTeam && ( |
||||||
|
<div className="flex items-center justify-start gap-2 sm:justify-end"> |
||||||
|
<RoadmapActionDropdown |
||||||
|
onUpdateSharing={() => { |
||||||
|
setSelectedResource(resourceConfig); |
||||||
|
}} |
||||||
|
onDelete={() => { |
||||||
|
if ( |
||||||
|
confirm( |
||||||
|
'Are you sure you want to remove this roadmap?' |
||||||
|
) |
||||||
|
) { |
||||||
|
onRemove(resourceConfig.resourceId).finally( |
||||||
|
() => {} |
||||||
|
); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
<a |
||||||
|
href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${ |
||||||
|
resourceConfig.resourceId |
||||||
|
}`}
|
||||||
|
className={ |
||||||
|
'flex gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none' |
||||||
|
} |
||||||
|
target={'_blank'} |
||||||
|
> |
||||||
|
<PenSquare className="inline-block h-4 w-4" /> |
||||||
|
Create Roadmap |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{customRoadmaps.length > 0 && ( |
||||||
|
<div className="mb-5"> |
||||||
|
<div className="mb-2 flex items-center justify-between"> |
||||||
|
<h3 className="flex w-full items-center justify-between text-xs uppercase text-gray-400"> |
||||||
|
<span className="flex">Custom Roadmaps</span> |
||||||
|
<span className="normal-case"> |
||||||
|
Total {customRoadmaps.length} roadmap(s) |
||||||
|
</span> |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col divide-y rounded-md border"> |
||||||
|
{customRoadmaps.map((resourceConfig: TeamResourceConfig[0]) => { |
||||||
|
const editorLink = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${ |
||||||
|
resourceConfig.resourceId |
||||||
|
}`;
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_110px]" |
||||||
|
key={resourceConfig.resourceId} |
||||||
|
> |
||||||
|
<div className="mb-3 grid grid-cols-1 sm:mb-0"> |
||||||
|
<p className="mb-1.5 truncate text-base font-medium leading-tight text-black"> |
||||||
|
{resourceConfig.title} |
||||||
|
</p> |
||||||
|
<span className="flex items-center text-xs leading-none text-gray-400"> |
||||||
|
<VisibilityBadge |
||||||
|
visibility={resourceConfig.visibility!} |
||||||
|
sharedTeamMemberIds={resourceConfig.sharedTeamMemberIds} |
||||||
|
sharedFriendIds={resourceConfig.sharedFriendIds} |
||||||
|
/> |
||||||
|
<span className="mx-2 font-semibold">·</span> |
||||||
|
<Shapes size={16} className="mr-1 inline-block h-4 w-4" /> |
||||||
|
{resourceConfig.topics} topic |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="mr-1 flex items-center justify-start sm:justify-end"> |
||||||
|
{canManageCurrentTeam && ( |
||||||
|
<RoadmapActionDropdown |
||||||
|
onUpdateSharing={() => { |
||||||
|
setSelectedResource(resourceConfig); |
||||||
|
}} |
||||||
|
onCustomize={() => { |
||||||
|
window.open(editorLink, '_blank'); |
||||||
|
}} |
||||||
|
onDelete={() => { |
||||||
|
if ( |
||||||
|
confirm( |
||||||
|
'Are you sure you want to remove this roadmap?' |
||||||
|
) |
||||||
|
) { |
||||||
|
onRemove(resourceConfig.resourceId).finally( |
||||||
|
() => {} |
||||||
|
); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<a |
||||||
|
href={`/r?id=${resourceConfig.resourceId}`} |
||||||
|
className={ |
||||||
|
'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none' |
||||||
|
} |
||||||
|
target={'_blank'} |
||||||
|
> |
||||||
|
<ExternalLink className="inline-block h-4 w-4" /> |
||||||
|
Visit |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{defaultRoadmaps.length > 0 && ( |
||||||
|
<div> |
||||||
|
<div className="mb-2 flex items-center justify-between"> |
||||||
|
<h3 className="flex w-full items-center justify-between text-xs uppercase text-gray-400"> |
||||||
|
<span className="flex">Default Roadmaps</span> |
||||||
|
<span className="normal-case"> |
||||||
|
Total {defaultRoadmaps.length} roadmap(s) |
||||||
|
</span> |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
<div className="flex flex-col divide-y rounded-md border"> |
||||||
|
{defaultRoadmaps.map((resourceConfig: TeamResourceConfig[0]) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="grid grid-cols-1 p-3 sm:grid-cols-[auto_110px]" |
||||||
|
key={resourceConfig.resourceId} |
||||||
|
> |
||||||
|
<div className="mb-3 grid grid-cols-1 sm:mb-0"> |
||||||
|
<p className="mb-1.5 truncate text-base font-medium leading-tight text-black"> |
||||||
|
{resourceConfig.title} |
||||||
|
</p> |
||||||
|
<span className="flex items-center text-xs leading-none text-gray-400"> |
||||||
|
{resourceConfig?.removed?.length > 0 && ( |
||||||
|
<> |
||||||
|
<PackageMinus |
||||||
|
size={16} |
||||||
|
className="mr-1 inline-block h-4 w-4" |
||||||
|
/> |
||||||
|
{resourceConfig.removed.length} topics removed |
||||||
|
</> |
||||||
|
)} |
||||||
|
|
||||||
|
{!resourceConfig?.removed?.length && ( |
||||||
|
<> |
||||||
|
<Package |
||||||
|
size={16} |
||||||
|
className="mr-1 inline-block h-4 w-4" |
||||||
|
/> |
||||||
|
No changes made |
||||||
|
</> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="mr-1 flex items-center justify-start sm:justify-end"> |
||||||
|
{canManageCurrentTeam && ( |
||||||
|
<RoadmapActionDropdown |
||||||
|
onCustomize={() => { |
||||||
|
setChangingRoadmapId(resourceConfig.resourceId); |
||||||
|
}} |
||||||
|
onDelete={() => { |
||||||
|
if ( |
||||||
|
confirm( |
||||||
|
'Are you sure you want to remove this roadmap?' |
||||||
|
) |
||||||
|
) { |
||||||
|
onRemove(resourceConfig.resourceId).finally( |
||||||
|
() => {} |
||||||
|
); |
||||||
|
} |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<a |
||||||
|
href={`/${resourceConfig.resourceId}`} |
||||||
|
className={ |
||||||
|
'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none' |
||||||
|
} |
||||||
|
target={'_blank'} |
||||||
|
> |
||||||
|
<ExternalLink className="inline-block h-4 w-4" /> |
||||||
|
Visit |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
|
||||||
|
{canManageCurrentTeam && ( |
||||||
|
<div className="mt-5"> |
||||||
|
<button |
||||||
|
className="block w-full rounded-md border border-dashed border-gray-300 py-2 text-sm transition-colors hover:border-gray-600 hover:bg-gray-50 focus:outline-0" |
||||||
|
onClick={() => setIsPickingOptions(true)} |
||||||
|
> |
||||||
|
+ Add new Roadmap |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type VisibilityLabelProps = { |
||||||
|
visibility: AllowedRoadmapVisibility; |
||||||
|
sharedTeamMemberIds?: string[]; |
||||||
|
sharedFriendIds?: string[]; |
||||||
|
}; |
||||||
|
|
||||||
|
const visibilityDetails: Record< |
||||||
|
AllowedRoadmapVisibility, |
||||||
|
{ |
||||||
|
icon: LucideIcon; |
||||||
|
label: string; |
||||||
|
} |
||||||
|
> = { |
||||||
|
public: { |
||||||
|
icon: Globe, |
||||||
|
label: 'Public', |
||||||
|
}, |
||||||
|
me: { |
||||||
|
icon: LockIcon, |
||||||
|
label: 'Only me', |
||||||
|
}, |
||||||
|
team: { |
||||||
|
icon: Users, |
||||||
|
label: 'Team Member(s)', |
||||||
|
}, |
||||||
|
friends: { |
||||||
|
icon: Users, |
||||||
|
label: 'Friend(s)', |
||||||
|
}, |
||||||
|
} as const; |
||||||
|
|
||||||
|
export function VisibilityBadge(props: VisibilityLabelProps) { |
||||||
|
const { visibility, sharedTeamMemberIds = [], sharedFriendIds = [] } = props; |
||||||
|
|
||||||
|
const { label, icon: Icon } = visibilityDetails[visibility]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={`inline-flex items-center gap-1.5 whitespace-nowrap text-xs font-normal`} |
||||||
|
> |
||||||
|
<Icon className="inline-block h-3 w-3" /> |
||||||
|
<div className="flex items-center"> |
||||||
|
{visibility === 'team' && sharedTeamMemberIds?.length > 0 && ( |
||||||
|
<span className="mr-1">{sharedTeamMemberIds.length}</span> |
||||||
|
)} |
||||||
|
{visibility === 'friends' && sharedFriendIds?.length > 0 && ( |
||||||
|
<span className="mr-1">{sharedFriendIds.length}</span> |
||||||
|
)} |
||||||
|
{label} |
||||||
|
</div> |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,61 @@ |
|||||||
|
import { type ReactNode } from 'react'; |
||||||
|
import { clsx } from 'clsx'; |
||||||
|
|
||||||
|
type TooltipProps = { |
||||||
|
children: ReactNode; |
||||||
|
position?: |
||||||
|
| 'right-center' |
||||||
|
| 'right-top' |
||||||
|
| 'right-bottom' |
||||||
|
| 'left-center' |
||||||
|
| 'left-top' |
||||||
|
| 'left-bottom' |
||||||
|
| 'top-center' |
||||||
|
| 'top-left' |
||||||
|
| 'top-right' |
||||||
|
| 'bottom-center' |
||||||
|
| 'bottom-left' |
||||||
|
| 'bottom-right'; |
||||||
|
}; |
||||||
|
|
||||||
|
export function Tooltip(props: TooltipProps) { |
||||||
|
const { children, position = 'right-center' } = props; |
||||||
|
|
||||||
|
let positionClass = ''; |
||||||
|
if (position === 'right-center') { |
||||||
|
positionClass = 'left-full top-1/2 -translate-y-1/2 translate-x-1 '; |
||||||
|
} else if (position === 'top-center') { |
||||||
|
positionClass = 'bottom-full left-1/2 -translate-x-1/2 -translate-y-0.5'; |
||||||
|
} else if (position === 'bottom-center') { |
||||||
|
positionClass = 'top-full left-1/2 -translate-x-1/2 translate-y-0.5'; |
||||||
|
} else if (position === 'left-center') { |
||||||
|
positionClass = 'right-full top-1/2 -translate-y-1/2 -translate-x-1'; |
||||||
|
} else if (position === 'right-top') { |
||||||
|
positionClass = 'left-full top-0'; |
||||||
|
} else if (position === 'right-bottom') { |
||||||
|
positionClass = 'left-full bottom-0'; |
||||||
|
} else if (position === 'left-top') { |
||||||
|
positionClass = 'right-full top-0'; |
||||||
|
} else if (position === 'left-bottom') { |
||||||
|
positionClass = 'right-full bottom-0'; |
||||||
|
} else if (position === 'top-left') { |
||||||
|
positionClass = 'bottom-full left-0'; |
||||||
|
} else if (position === 'top-right') { |
||||||
|
positionClass = 'bottom-full right-0'; |
||||||
|
} else if (position === 'bottom-left') { |
||||||
|
positionClass = 'top-full left-0'; |
||||||
|
} else if (position === 'bottom-right') { |
||||||
|
positionClass = 'top-full right-0'; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={clsx( |
||||||
|
'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-sm duration-100 group-hover:opacity-100', |
||||||
|
positionClass |
||||||
|
)} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@ |
|||||||
|
import { clsx, type ClassValue } from 'clsx'; |
||||||
|
import { twMerge } from 'tailwind-merge'; |
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) { |
||||||
|
return twMerge(clsx(inputs)); |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
--- |
||||||
|
import AccountSidebar from '../../components/AccountSidebar.astro'; |
||||||
|
import AccountLayout from '../../layouts/AccountLayout.astro'; |
||||||
|
import { RoadmapListPage } from '../../components/CustomRoadmap/RoadmapListPage'; |
||||||
|
--- |
||||||
|
|
||||||
|
<AccountLayout |
||||||
|
title='Roadmaps' |
||||||
|
noIndex={true} |
||||||
|
initialLoadingMessage='Loading roadmaps' |
||||||
|
> |
||||||
|
<AccountSidebar activePageId='roadmaps' activePageTitle='Roadmaps'> |
||||||
|
<RoadmapListPage client:only='react' /> |
||||||
|
</AccountSidebar> |
||||||
|
</AccountLayout> |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
--- |
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro'; |
||||||
|
import { CustomRoadmap } from '../../components/CustomRoadmap/CustomRoadmap'; |
||||||
|
import { SkeletonRoadmapHeader } from '../../components/CustomRoadmap/SkeletonRoadmapHeader'; |
||||||
|
import Loader from '../../components/Loader.astro'; |
||||||
|
import ProgressHelpPopup from '../../components/ProgressHelpPopup.astro'; |
||||||
|
--- |
||||||
|
|
||||||
|
<BaseLayout title='Roadmaps'> |
||||||
|
<ProgressHelpPopup /> |
||||||
|
<div> |
||||||
|
<div class='flex min-h-[550px] flex-col'> |
||||||
|
<div data-roadmap-loader class='flex w-full grow flex-col'> |
||||||
|
<SkeletonRoadmapHeader /> |
||||||
|
<div class='flex grow items-center justify-center'> |
||||||
|
<Loader /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<CustomRoadmap client:only='react' /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</BaseLayout> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import { atom, computed } from 'nanostores'; |
||||||
|
import { type RoadmapDocument } from '../components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal'; |
||||||
|
|
||||||
|
export const currentRoadmap = atom<RoadmapDocument | undefined>(undefined); |
||||||
|
export const isCurrentRoadmapPersonal = computed( |
||||||
|
currentRoadmap, |
||||||
|
(roadmap) => !roadmap?.teamId |
||||||
|
); |
||||||
|
export const canManageCurrentRoadmap = computed( |
||||||
|
currentRoadmap, |
||||||
|
(roadmap) => roadmap?.canManage |
||||||
|
); |
||||||
Loading…
Reference in new issue