Skip to content

Commit

Permalink
Allow transferring roadmap between teams
Browse files Browse the repository at this point in the history
  • Loading branch information
@kamranahmedse
kamranahmedse committed May 21, 2024
1 parent f718d18 commit 359e3e1
Show file tree
Hide file tree
Showing 6 changed files with 97 additions and 73 deletions.
2 changes: 1 addition & 1 deletion src/components/Navigation/AccountDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function AccountDropdown() {
).length;

return (
<div className="relative z-50 animate-fade-in">
<div className="relative z-[90] animate-fade-in">
{isOnboardingModalOpen && onboardingConfig && (
<OnboardingModal
onboardingConfig={onboardingConfig}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PageProgress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function PageProgress(props: Props) {
return (
<div>
{/* Tailwind based spinner for full page */}
<div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
<div className="fixed left-0 top-0 z-[100] flex h-full w-full items-center justify-center bg-white bg-opacity-75">
<div className="flex items-center justify-center rounded-md border bg-white px-4 py-2 ">
<Spinner
className="h-4 w-4 sm:h-4 sm:w-4"
Expand Down
88 changes: 47 additions & 41 deletions src/components/ShareOptions/ShareOptionsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
const toast = useToast();

const [isLoading, setIsLoading] = useState(false);
const [isTransferringToTeam, setIsTransferringToTeam] = useState(false);
const [isSettingsUpdated, setIsSettingsUpdated] = useState(false);
const [friends, setFriends] = useState<ListFriendsResponse>([]);
const [teams, setTeams] = useState<UserTeamItem[]>([]);
Expand All @@ -71,13 +72,12 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
);
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) {
} else if (isTransferringToTeam && !selectedTeamId) {
isUpdateDisabled = true;
// Disable update button if there are no members to share with
} else if (
Expand Down Expand Up @@ -198,6 +198,8 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
</div>

<ShareOptionTabs
isTransferringToTeam={isTransferringToTeam}
setIsTransferringToTeam={setIsTransferringToTeam}
visibility={visibility}
setVisibility={setVisibility}
teamId={teamId}
Expand Down Expand Up @@ -226,48 +228,52 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
/>

<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}
/>
)}
{!isTransferringToTeam && (
<>
{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}
/>
)}

{/* For Team Roadmap */}
{visibility === 'team' && teamId && (
<ShareTeamMemberList
teamId={teamId}
sharedTeamMemberIds={sharedTeamMemberIds}
setSharedTeamMemberIds={setSharedTeamMemberIds}
membersCache={membersCache}
isTeamMembersLoading={isTeamMembersLoading}
setIsTeamMembersLoading={setIsTeamMembersLoading}
/>
{/* For Team Roadmap */}
{visibility === 'team' && teamId && (
<ShareTeamMemberList
teamId={teamId}
sharedTeamMemberIds={sharedTeamMemberIds}
setSharedTeamMemberIds={setSharedTeamMemberIds}
membersCache={membersCache}
isTeamMembersLoading={isTeamMembersLoading}
setIsTeamMembersLoading={setIsTeamMembersLoading}
/>
)}
</>
)}

{canTransferRoadmap && (
{isTransferringToTeam && (
<>
<TransferToTeamList
currentTeamId={teamId}
teams={teams}
setTeams={setTeams}
selectedTeamId={selectedTeamId}
Expand Down Expand Up @@ -319,7 +325,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
Close
</button>

{canTransferRoadmap && (
{isTransferringToTeam && (
<UpdateAction
disabled={
isUpdateDisabled || isLoading || sharedTeamMemberIds.length === 0
Expand All @@ -335,7 +341,7 @@ export function ShareOptionsModal(props: ShareOptionsModalProps) {
</UpdateAction>
)}

{!canTransferRoadmap && (
{!isTransferringToTeam && (
<UpdateAction
disabled={isUpdateDisabled || isLoading}
onClick={() => {
Expand Down
34 changes: 24 additions & 10 deletions src/components/ShareOptions/ShareOptionsTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
} from 'lucide-react';
import type { AllowedRoadmapVisibility } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
import { cn } from '../../lib/classname';
import { $teamList } from '../../stores/team.ts';
import { useStore } from '@nanostores/react';

export const allowedVisibilityLabels: {
id: AllowedRoadmapVisibility;
Expand Down Expand Up @@ -44,15 +46,29 @@ export const allowedVisibilityLabels: {
type ShareOptionTabsProps = {
visibility: AllowedRoadmapVisibility;
setVisibility: (visibility: AllowedRoadmapVisibility) => void;

isTransferringToTeam: boolean;
setIsTransferringToTeam: (isTransferringToTeam: boolean) => void;

teamId?: string;

onChange: (visibility: AllowedRoadmapVisibility) => void;
};

export function ShareOptionTabs(props: ShareOptionTabsProps) {
const { visibility, setVisibility, teamId, onChange } = props;
const {
isTransferringToTeam,
setIsTransferringToTeam,
visibility,
setVisibility,
teamId,
onChange,
} = props;

const handleClick = (visibility: AllowedRoadmapVisibility) => {
const teamList = useStore($teamList);

const handleTabClick = (visibility: AllowedRoadmapVisibility) => {
setIsTransferringToTeam(false);
setVisibility(visibility);
onChange(visibility);
};
Expand All @@ -63,33 +79,31 @@ export function ShareOptionTabs(props: ShareOptionTabsProps) {
{allowedVisibilityLabels.map((v) => {
if (v.id === 'friends' && teamId) {
return null;
} else if (v.id === 'team' && !teamId) {
return null;
}

const isActive = v.id === visibility;
const isActive = !isTransferringToTeam && v.id === visibility;
return (
<li key={v.id}>
<OptionTab
label={v.label}
isActive={isActive}
icon={v.icon}
onClick={() => {
handleClick(v.id);
handleTabClick(v.id);
}}
/>
</li>
);
})}
</ul>
{!teamId && (
{(!teamId || teamList.length > 1) && (
<div className="grow">
<OptionTab
label="Transfer to team"
icon={ArrowLeftRight}
isActive={visibility === 'team'}
isActive={isTransferringToTeam}
onClick={() => {
handleClick('team');
setIsTransferringToTeam(true);
}}
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'
/>
Expand All @@ -115,7 +129,7 @@ function OptionTab(props: OptionTabProps) {
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
className,
)}
data-active={isActive}
disabled={isActive}
Expand Down
33 changes: 16 additions & 17 deletions src/components/ShareOptions/ShareSuccess.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,25 +82,24 @@ export function ShareSuccess(props: ShareSuccessProps) {
</p>
)}

<div className="mt-2 border-t pt-2">
<p className="text-sm text-gray-400">
You can also embed this roadmap on your website.
</p>
<div className="mt-2">
<input
onClick={(e) => {
e.currentTarget.select();
copyText(embedHtml);
}}
readOnly={true}
className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
value={embedHtml}
/>
</div>
</div>

{visibility === 'public' && (
<>
<div className="mt-2 border-t pt-2">
<p className="text-sm text-gray-400">
You can also embed this roadmap on your website.
</p>
<div className="mt-2">
<input
onClick={(e) => {
e.currentTarget.select();
copyText(embedHtml);
}}
readOnly={true}
className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
value={embedHtml}
/>
</div>
</div>
<div className="-mx-4 mt-4 flex items-center gap-1.5">
<span className="h-px grow bg-gray-300" />
<span className="px-2 text-xs uppercase text-gray-400">Or</span>
Expand Down
11 changes: 8 additions & 3 deletions src/components/ShareOptions/TransferToTeamList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type TransferToTeamListProps = {
teams: UserTeamItem[];
setTeams: (teams: UserTeamItem[]) => void;

currentTeamId?: string;
selectedTeamId: string | null;
setSelectedTeamId: (teamId: string | null) => void;

Expand All @@ -24,6 +25,7 @@ export function TransferToTeamList(props: TransferToTeamListProps) {
selectedTeamId,
setSelectedTeamId,
isTeamMembersLoading,
currentTeamId,
setIsTeamMembersLoading,
onTeamChange,
} = props;
Expand All @@ -38,15 +40,15 @@ export function TransferToTeamList(props: TransferToTeamListProps) {
}

const { response, error } = await httpGet<UserTeamItem[]>(
`${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`
`${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))
response.filter((team) => ['admin', 'manager'].includes(team.role)),
);
}

Expand Down Expand Up @@ -80,13 +82,16 @@ export function TransferToTeamList(props: TransferToTeamListProps) {
<ul className="mt-2 grid grid-cols-3 gap-1.5">
{teams.map((team) => {
const isSelected = team._id === selectedTeamId;
if (team._id === currentTeamId) {
return null;
}

return (
<li key={team._id}>
<button
className={cn(
'relative flex w-full items-center gap-2.5 rounded-lg border p-2.5 disabled:cursor-not-allowed disabled:opacity-70',
isSelected && 'border-gray-500 bg-gray-100 text-black'
isSelected && 'border-gray-500 bg-gray-100 text-black',
)}
disabled={isTeamMembersLoading}
onClick={() => {
Expand Down

0 comments on commit 359e3e1

Please sign in to comment.