Minor design improvements to user table and diagnose page

This commit is contained in:
2025-12-30 16:06:18 +01:00
parent ba942b2f8f
commit 170cac2091
2 changed files with 115 additions and 107 deletions

View File

@@ -48,18 +48,22 @@
</Card>
</div>
<div class="col-span-1">
<Card>
<CardContent ClassName="flex justify-center items-center">
@if (IsLoading)
{
@if (IsLoading)
{
<Card>
<CardContent ClassName="flex justify-center items-center">
<Spinner ClassName="size-10"/>
}
else
</CardContent>
</Card>
}
else
{
if (HasDiagnosed)
{
if (Entries.Length == 0)
{
if (HasDiagnosed)
{
if (Entries.Length == 0)
{
<Card>
<CardContent ClassName="flex justify-center items-center">
<Empty>
<EmptyHeader>
<EmptyMedia Variant="EmptyMediaVariant.Icon">
@@ -71,123 +75,127 @@
</EmptyDescription>
</EmptyHeader>
</Empty>
}
else
</CardContent>
</Card>
}
else
{
<Accordion
ClassName="w-full"
Type="AccordionType.Single">
@for (var i = 0; i < Entries.Length; i++)
{
<Accordion
ClassName="w-full"
Type="AccordionType.Single">
var entry = Entries[i];
@for (var i = 0; i < Entries.Length; i++)
{
var entry = Entries[i];
var textColor = entry.Level switch
{
DiagnoseLevel.Error => "text-destructive",
DiagnoseLevel.Warning => "text-yellow-400",
DiagnoseLevel.Healthy => "text-green-500"
};
var textColor = entry.Level switch
{
DiagnoseLevel.Error => "text-destructive",
DiagnoseLevel.Warning => "text-yellow-300",
DiagnoseLevel.Healthy => "text-green-500"
};
<AccordionItem
ClassName="overflow-hidden border bg-card px-4 first:rounded-t-lg last:rounded-b-lg last:border-b"
Value="@($"diagnoseEntry{i}")">
<AccordionItem
ClassName="overflow-hidden border bg-background px-4 first:rounded-t-lg last:rounded-b-lg last:border-b"
Value="@($"diagnoseEntry{i}")">
<AccordionTrigger className="hover:no-underline">
<div class="flex items-center gap-3">
<AccordionTrigger className="hover:no-underline">
<div class="flex items-center gap-3">
@switch (entry.Level)
{
case DiagnoseLevel.Error:
<CircleXIcon ClassName="@textColor"/>
break;
@switch (entry.Level)
{
case DiagnoseLevel.Error:
<CircleXIcon ClassName="@textColor"/>
break;
case DiagnoseLevel.Warning:
<TriangleAlertIcon ClassName="@textColor"/>
break;
case DiagnoseLevel.Warning:
<TriangleAlertIcon ClassName="@textColor"/>
break;
case DiagnoseLevel.Healthy:
<CircleCheckIcon ClassName="@textColor"/>
break;
}
case DiagnoseLevel.Healthy:
<CircleCheckIcon ClassName="@textColor"/>
break;
}
<div class="flex flex-col items-start text-left">
<div class="flex flex-col items-start text-left">
<span class="@textColor">
@entry.Title
</span>
<span class="text-sm text-muted-foreground">
<span class="text-sm text-muted-foreground">
@(string.Join(" / ", entry.Tags))
</span>
</div>
</div>
</AccordionTrigger>
<AccordionContent ClassName="ps-7">
<div class="text-muted-foreground flex flex-col gap-y-3">
</div>
</div>
</AccordionTrigger>
<AccordionContent ClassName="ps-7">
<div class="text-muted-foreground flex flex-col gap-y-3">
@if (!string.IsNullOrWhiteSpace(entry.StackStrace))
{
<div
class="rounded-xl p-2.5 bg-black max-h-36 overflow-auto scrollbar-thin">
@entry.StackStrace
</div>
}
@if (!string.IsNullOrWhiteSpace(entry.Message))
{
<p>
@entry.Message
</p>
}
@if (
!string.IsNullOrWhiteSpace(entry.ReportUrl) ||
!string.IsNullOrWhiteSpace(entry.StackStrace) ||
!string.IsNullOrWhiteSpace(entry.SolutionUrl)
)
{
<div class="flex justify-end gap-x-1">
@if (!string.IsNullOrWhiteSpace(entry.StackStrace))
{
<div
class="rounded-xl p-2.5 bg-black max-h-36 overflow-auto scrollbar-thin">
@entry.StackStrace
</div>
<Button Variant="ButtonVariant.Outline">
<CopyIcon/>
Copy
</Button>
}
@if (!string.IsNullOrWhiteSpace(entry.Message))
@if (!string.IsNullOrWhiteSpace(entry.SolutionUrl))
{
<p>
@entry.Message
</p>
<Button Variant="ButtonVariant.Outline">
<Slot>
<a href="@entry.SolutionUrl" @attributes="context">
<WrenchIcon/>
Show suggested solution
</a>
</Slot>
</Button>
}
@if (
!string.IsNullOrWhiteSpace(entry.ReportUrl) ||
!string.IsNullOrWhiteSpace(entry.StackStrace) ||
!string.IsNullOrWhiteSpace(entry.SolutionUrl)
)
@if (!string.IsNullOrWhiteSpace(entry.ReportUrl))
{
<div class="flex justify-end gap-x-1">
@if (!string.IsNullOrWhiteSpace(entry.StackStrace))
{
<Button Variant="ButtonVariant.Outline">
<CopyIcon/>
Copy
</Button>
}
@if (!string.IsNullOrWhiteSpace(entry.SolutionUrl))
{
<Button Variant="ButtonVariant.Outline">
<Slot>
<a href="@entry.SolutionUrl" @attributes="context">
<WrenchIcon/>
Show suggested solution
</a>
</Slot>
</Button>
}
@if (!string.IsNullOrWhiteSpace(entry.ReportUrl))
{
<Button Variant="ButtonVariant.Outline">
<Slot>
<a href="@entry.ReportUrl" @attributes="context">
<GitBranchIcon/>
Report on Github
</a>
</Slot>
</Button>
}
</div>
<Button Variant="ButtonVariant.Outline">
<Slot>
<a href="@entry.ReportUrl" @attributes="context">
<GitBranchIcon/>
Report on Github
</a>
</Slot>
</Button>
}
</div>
</AccordionContent>
</AccordionItem>
}
</Accordion>
}
</div>
</AccordionContent>
</AccordionItem>
}
}
else
{
</Accordion>
}
}
else
{
<Card>
<CardContent ClassName="flex justify-center items-center">
<Empty>
<EmptyHeader>
<EmptyMedia Variant="EmptyMediaVariant.Icon">
@@ -199,10 +207,10 @@
</EmptyDescription>
</EmptyHeader>
</Empty>
}
}
</CardContent>
</Card>
</CardContent>
</Card>
}
}
</div>
</div>

View File

@@ -36,7 +36,7 @@
</div>
<div class="mt-8">
<DataGrid @ref="Grid" TGridItem="UserResponse" Loader="LoadAsync" PageSize="10">
<DataGrid @ref="Grid" TGridItem="UserResponse" Loader="LoadAsync" PageSize="10" ClassName="bg-card">
<PropertyColumn HeadClassName="text-left" CellClassName="text-left" Field="u => u.Id"/>
<PropertyColumn HeadClassName="text-left" CellClassName="text-left" IsFilterable="true"
Identifier="@nameof(UserResponse.Username)" Field="u => u.Username"/>