Better placeholder for no data

zengm-games · Jan 27, 2025 · 51c2d02 · 51c2d02
1 parent 25c0485
commit 51c2d02
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 91 deletions.
diff --git a/TODO b/TODO
@@ -2,7 +2,6 @@ tables should be aware that rows are players who have pids. add bulk/all/select
 - extra places to add DataTable
   - SortableTable - especially for roster
     - remove Delete Players button on roster
-- some better UI for league leaders when no players are in any table
 - test
   - interaction with hideAllControls and other options
     - hideAllControls should move to a string always?

diff --git a/src/ui/views/Leaders.tsx b/src/ui/views/Leaders.tsx
@@ -73,6 +73,8 @@ const Leaders = ({
 
 	const totals = statType === "totals" && isSport("basketball");
 
+	const noQualifiedLeaders = categories.every(cat => cat.leaders.length === 0);
+
 	return (
 		<>
 			<MoreLinks
@@ -84,104 +86,112 @@ const Leaders = ({
 			/>
 			<LeadersTopText includeHighlight={highlightActiveAndHOF} />
 
-			<div className="row" style={{ marginTop: -14 }}>
-				{categories.map(cat => {
-					const cols = getCols(["#", "Name", `stat:${cat.stat}`]);
-					const statCol = cols[2];
-					if (cat.titleOverride === statCol.desc) {
-						throw new Error("Useless titleOverride");
-					}
+			{noQualifiedLeaders ? (
+				<p>No data yet.</p>
+			) : (
+				<div className="row" style={{ marginTop: -14 }}>
+					{categories.map(cat => {
+						const cols = getCols(["#", "Name", `stat:${cat.stat}`]);
+						const statCol = cols[2];
+						if (cat.titleOverride === statCol.desc) {
+							throw new Error("Useless titleOverride");
+						}
 
-					const title = cat.titleOverride ?? statCol.desc ?? "???";
-					const desc = cat.titleOverride ? statCol.desc : undefined;
+						const title = cat.titleOverride ?? statCol.desc ?? "???";
+						const desc = cat.titleOverride ? statCol.desc : undefined;
 
-					const rows: DataTableRow[] = cat.leaders.map((p, j) => {
-						const numericSeason =
-							season === "career"
-								? undefined
-								: season === "all"
-									? p.season
-									: season;
+						const rows: DataTableRow[] = cat.leaders.map((p, j) => {
+							const numericSeason =
+								season === "career"
+									? undefined
+									: season === "all"
+										? p.season
+										: season;
 
-						let teamUrlParts;
-						if (season === "career") {
-							teamUrlParts = ["team_history", `${p.abbrev}_${p.tid}`];
-						} else {
-							teamUrlParts = ["roster", `${p.abbrev}_${p.tid}`, numericSeason];
-						}
+							let teamUrlParts;
+							if (season === "career") {
+								teamUrlParts = ["team_history", `${p.abbrev}_${p.tid}`];
+							} else {
+								teamUrlParts = [
+									"roster",
+									`${p.abbrev}_${p.tid}`,
+									numericSeason,
+								];
+							}
 
-						const seasonText = p.season !== undefined ? ` ${p.season}` : "";
+							const seasonText = p.season !== undefined ? ` ${p.season}` : "";
 
-						return {
-							key: p.key,
-							metadata: {
-								type: "player",
-								pid: p.pid,
-								season: numericSeason ?? "career",
-								playoffs,
-							},
-							data: [
-								{
-									value: j + 1,
-									style: {
-										// Need this here rather than in cols becuase we're using hideHeader
-										width: 1,
-									},
+							return {
+								key: p.key,
+								metadata: {
+									type: "player",
+									pid: p.pid,
+									season: numericSeason ?? "career",
+									playoffs,
 								},
-								<>
-									<PlayerNameLabels
-										pid={p.pid}
-										injury={p.injury}
-										season={numericSeason}
-										skills={p.skills}
-										watch={p.watch}
-										firstName={p.firstNameShort}
-										firstNameShort={p.firstNameShort}
-										lastName={p.lastName}
-									/>
-									<a href={helpers.leagueUrl(teamUrlParts)} className="mx-2">
-										{p.abbrev}
-										{seasonText}
-									</a>
-									{p.pos}
-								</>,
-								{
-									value: helpers.roundStat(p.stat, cat.stat, totals),
-									classNames: "text-end",
+								data: [
+									{
+										value: j + 1,
+										style: {
+											// Need this here rather than in cols becuase we're using hideHeader
+											width: 1,
+										},
+									},
+									<>
+										<PlayerNameLabels
+											pid={p.pid}
+											injury={p.injury}
+											season={numericSeason}
+											skills={p.skills}
+											watch={p.watch}
+											firstName={p.firstNameShort}
+											firstNameShort={p.firstNameShort}
+											lastName={p.lastName}
+										/>
+										<a href={helpers.leagueUrl(teamUrlParts)} className="mx-2">
+											{p.abbrev}
+											{seasonText}
+										</a>
+										{p.pos}
+									</>,
+									{
+										value: helpers.roundStat(p.stat, cat.stat, totals),
+										classNames: "text-end",
+									},
+								],
+								classNames: {
+									"table-danger": highlightActiveAndHOF && p.hof,
+									"table-success":
+										highlightActiveAndHOF && p.retiredYear === Infinity,
+									"table-info": p.userTeam,
 								},
-							],
-							classNames: {
-								"table-danger": highlightActiveAndHOF && p.hof,
-								"table-success":
-									highlightActiveAndHOF && p.retiredYear === Infinity,
-								"table-info": p.userTeam,
-							},
-						};
-					});
+							};
+						});
 
-					return (
-						<div
-							key={cat.stat}
-							className={colClassName}
-							style={{ marginTop: 14 }}
-						>
-							<DataTable
-								cols={cols}
-								defaultSort={"disableSort"}
-								hideHeader
-								hideAllControls={
-									<h3 title={desc}>
-										{title} ({statCol.title})
-									</h3>
-								}
-								name={`LeagueLeaders_${cat.stat}`}
-								pagination
-								rows={rows}
-							/>
-						</div>
-					);
-				})}
-			</div>
+						return (
+							<div
+								key={cat.stat}
+								className={colClassName}
+								style={{ marginTop: 14 }}
+							>
+								<DataTable
+									cols={cols}
+									defaultSort={"disableSort"}
+									hideHeader
+									hideAllControls={
+										<h3 title={desc}>
+											{title} ({statCol.title})
+										</h3>
+									}
+									name={`LeagueLeaders_${cat.stat}`}
+									pagination
+									rows={rows}
+								/>
+							</div>
+						);
+					})}
+				</div>
+			)}
 		</>
 	);
 };