Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve the size/styling of the CoachingSessionSelector and SelectCoachingSession components #61

Merged
merged 2 commits into from
Jan 5, 2025
Merged

Improve the size/styling of the CoachingSessionSelector and SelectCoachingSession components #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e840ad4
Improve the size/styling of the CoachingSessionSelector and SelectCoa…
jhodapp Jan 4, 2025
0f067b2
Make the CoachingSessionSelector component be more responsive on the …
jhodapp Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/coaching-sessions/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export default function CoachingSessionsPage() {
style={siteConfig.titleStyle}
onRender={handleTitleRender}
></CoachingSessionTitle>
<div className="ml-auto flex w-[28rem] space-x-2 sm:justify-end">
<div className="ml-auto flex w-full sm:max-w-sm md:max-w-md space-x-2 sm:justify-end md:justify-start">
<CoachingSessionSelector
relationshipId={currentCoachingRelationshipId}
disabled={!currentCoachingRelationshipId}
Expand Down
133 changes: 68 additions & 65 deletions src/components/ui/coaching-session-selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { DateTime } from "ts-luxon";
import { useCoachingSessionStateStore } from "@/lib/providers/coaching-session-state-store-provider";
import { fetchOverarchingGoalsByCoachingSessionId } from "@/lib/api/overarching-goals";
import { OverarchingGoal } from "@/types/overarching-goal";
import { CoachingSession } from "@/types/coaching-session";

interface CoachingSessionsSelectorProps extends PopoverProps {
/// The CoachingRelationship Id for which to get a list of associated CoachingSessions
Expand Down Expand Up @@ -75,67 +76,63 @@ function CoachingSessionsSelectItems({
if (isErrorSessions) return <div>Error loading coaching sessions</div>;
if (!coachingSessions?.length) return <div>No coaching sessions found</div>;

const SessionItem = ({
session,
goals,
sessionIndex,
}: {
session: CoachingSession;
goals: (OverarchingGoal[] | undefined)[];
sessionIndex: number;
}) => (
<SelectItem value={session.id}>
<div className="flex min-w-0 w-[calc(100%-20px)]">
<div className="min-w-0 w-full">
<p className="truncate text-sm font-medium">
{goals[sessionIndex]?.[0]?.title || "No goal set"}
</p>
<p className="truncate text-sm text-gray-400">
{getDateTimeFromString(session.date).toLocaleString(
DateTime.DATETIME_FULL
)}
</p>
</div>
</div>
</SelectItem>
);

return (
<>
{coachingSessions.some(
(session) => getDateTimeFromString(session.date) < DateTime.now()
) && (
<SelectGroup>
<SelectLabel>Previous Sessions</SelectLabel>
{coachingSessions
.filter(
(session) => getDateTimeFromString(session.date) < DateTime.now()
)
.map((session) => {
const sessionIndex = coachingSessions.findIndex(
(s) => s.id === session.id
);
return (
<SelectItem value={session.id} key={session.id}>
<div className="flex flex-col w-full">
<span className="text-left truncate overflow-hidden">
{goals[sessionIndex]?.[0]?.title || "No goal set"}
</span>
<span className="text-sm text-gray-400">
{getDateTimeFromString(session.date).toLocaleString(
DateTime.DATETIME_FULL
)}
</span>
</div>
</SelectItem>
);
})}
</SelectGroup>
)}
{coachingSessions.some(
(session) => getDateTimeFromString(session.date) >= DateTime.now()
) && (
<SelectGroup>
<SelectLabel>Upcoming Sessions</SelectLabel>
{coachingSessions
.filter(
(session) => getDateTimeFromString(session.date) >= DateTime.now()
)
.map((session) => {
const sessionIndex = coachingSessions.findIndex(
(s) => s.id === session.id
);
return (
<SelectItem value={session.id} key={session.id}>
<div className="flex flex-col w-full">
<span className="text-left truncate overflow-hidden">
{goals[sessionIndex]?.[0]?.title || "No goal set"}
</span>
<span className="text-sm text-gray-400">
{getDateTimeFromString(session.date).toLocaleString(
DateTime.DATETIME_FULL
)}
</span>
</div>
</SelectItem>
);
})}
</SelectGroup>
{[
{
label: "Previous Sessions",
condition: (date: string) =>
getDateTimeFromString(date) < DateTime.now(),
},
{
label: "Upcoming Sessions",
condition: (date: string) =>
getDateTimeFromString(date) >= DateTime.now(),
},
].map(
({ label, condition }) =>
coachingSessions.some((session) => condition(session.date)) && (
<SelectGroup key={label}>
<SelectLabel>{label}</SelectLabel>
{coachingSessions
.filter((session) => condition(session.date))
.map((session) => (
<SessionItem
key={session.id}
session={session}
goals={goals}
sessionIndex={coachingSessions.findIndex(
(s) => s.id === session.id
)}
/>
))}
</SelectGroup>
)
)}
</>
);
Expand Down Expand Up @@ -188,11 +185,11 @@ export default function CoachingSessionSelector({
};

const displayValue = currentSession ? (
<div className="flex flex-col w-[28rem]">
<span className="truncate overflow-hidden text-left">
<div className="flex flex-col w-full">
<span className="truncate text-left">
{currentGoal?.title || "No goal set"}
</span>
<span className="text-sm text-gray-500 text-left">
<span className="text-sm text-gray-500 text-left truncate">
{getDateTimeFromString(currentSession.date).toLocaleString(
DateTime.DATETIME_FULL
)}
Expand All @@ -206,12 +203,18 @@ export default function CoachingSessionSelector({
value={currentCoachingSessionId ?? undefined}
onValueChange={handleSetCoachingSession}
>
<SelectTrigger id="coaching-session-selector">
<SelectValue placeholder="Select coaching session">
<SelectTrigger
className="w-full min-w-0 py-6 pr-2"
id="coaching-session-selector"
>
<SelectValue className="truncate" placeholder="Select coaching session">
{displayValue}
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectContent
className="w-[var(--radix-select-trigger-width)] min-w-0 max-w-full"
position="popper"
>
<CoachingSessionsSelectItems relationshipId={relationshipId} />
</SelectContent>
</Select>
Expand Down
4 changes: 2 additions & 2 deletions src/components/ui/dashboard/select-coaching-session.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ export default function SelectCoachingSession() {
);

return (
<Card>
<Card className="w-full min-w-0 sm:min-w-[320]">
<CardHeader>
<CardTitle>Join a Coaching Session</CardTitle>
<CardDescription>
Select current organization, relationship and session
</CardDescription>
</CardHeader>
<CardContent className="grid gap-6">
<CardContent className="grid gap-6 min-w-0">
<div className="grid gap-2">
<Label htmlFor="organization">Organization</Label>
<OrganizationSelector userId={userId}></OrganizationSelector>
Expand Down
Loading