Skip to content

Better View on ViewProblemPage #14

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

Merged
merged 3 commits into from
Nov 11, 2024
Merged

Better View on ViewProblemPage #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
49c1902
Better view for PublicProblemTable
KanonKC Nov 11, 2024
687fc86
Better view on ProblemView
KanonKC Nov 11, 2024
9c4f57b
Remove unused import compoenents
KanonKC Nov 11, 2024
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
11 changes: 7 additions & 4 deletions src/components/ProblemViewLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import TestcasesGradingIndicator from "./TestcasesGradingIndicator";
import { Button } from "./shadcn/Button";
import { Combobox } from "./shadcn/Combobox";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./shadcn/Resizable";
import DifficultyBadge from "./DifficultyBadge";
import { Separator } from "./shadcn/Seperator";

export type OnSubmitProblemViewLayoutCallback = {
setGrading: React.Dispatch<React.SetStateAction<boolean>>
Expand Down Expand Up @@ -115,14 +115,17 @@ const ProblemViewLayout = ({
</p>
</div>

<div className="flex">
{/* <div className="flex">
<b className="mr-2">Difficulty</b>
<p className="">
<DifficultyBadge level={problem?.difficulty}/>
</p>
</div>
</div> */}
</div>
</div>
<div className="mt-[8px] mb-[16px]">
<Separator orientation="horizontal"/>
</div>
<div>
{problem && (
<ReadOnlyPlate
Expand All @@ -131,7 +134,7 @@ const ProblemViewLayout = ({
String(problem.description)
)
)}
className="h-[70vh] xl:h-[80vh]"
className="h-[65vh] xl:h-[75vh]"
/>
)}
</div>
Expand Down
110 changes: 77 additions & 33 deletions src/components/Tables/ProblemTables/MyProblemsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { ColumnDef } from "@tanstack/react-table";
import {
Check,
FileSpreadsheet,
MoreHorizontal,
Tally4,
Tally5,
Timer,
X
Check,
FileSpreadsheet,
MoreHorizontal,
Tally4,
Tally5,
Timer,
X,
} from "lucide-react";
import { Link } from "react-router-dom";
import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLanguage";
Expand All @@ -16,12 +16,18 @@ import { readableDateFormat } from "../../../utilities/ReadableDateFormat";
import MyProblemDropdown from "../../Dropdowns/MyProblemDropdown";
import { DataTable } from "../Prototype/DataTable";
import DataTableSortableLayout from "../Prototype/DataTableSortableLayout";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "../../shadcn/HoverCard";
import { Badge } from "../../shadcn/Badge";

const columns: ColumnDef<ProblemPopulateTestcases>[] = [
{
accessorKey: "title",
header: ({column})=>(
<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
header: ({ column }) => (
<DataTableSortableLayout
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Title
</DataTableSortableLayout>
),
Expand All @@ -39,15 +45,19 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [

{
accessorKey: "creator",
header: ({column})=>(
<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
header: ({ column }) => (
<DataTableSortableLayout
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Author
</DataTableSortableLayout>
),
cell: ({ row }) => {
return (
<div className="font-medium">
{row.original.creator.username}
{row.original.creator.username}
</div>
);
},
Expand Down Expand Up @@ -75,10 +85,7 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
},
{
accessorKey: "source_code",
header: () => <div className="text-center">

Source Code
</div>,
header: () => <div className="text-center">Source Code</div>,
cell: ({ row }) => {
return (
<div className="flex justify-center">
Expand Down Expand Up @@ -123,19 +130,57 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
header: () => <div className="text-center">Allowed Languages</div>,
cell: ({ row }) => (
<div className="font-medium flex justify-center">
{row.original.allowed_languages.split(",").map((lang) => (
<span className="mx-0.5">
{
ProgrammingLanguageOptions.find(
(option) => option.value === lang
)?.badge
}
</span>
))}
<div className="font-medium">
{row.original.allowed_languages
.split(",")
.slice(0, 2)
.map((lang) => (
<span className="mx-0.5">
{
ProgrammingLanguageOptions.find(
(option) => option.value === lang
)?.badge
}
</span>
))}

{row.original.allowed_languages.split(",").length > 2 && (
<span className="mx-0.5">
<HoverCard>
<HoverCardTrigger>
<Badge className="bg-neutral-200 text-black cursor-pointer">
...{" "}
{row.original.allowed_languages.split(
","
).length - 2}{" "}
more
</Badge>
</HoverCardTrigger>
<HoverCardContent>
<div className="flex gap-0.5">
{row.original.allowed_languages
.split(",")
.map((lang) => (
<div>
{
ProgrammingLanguageOptions.find(
(option) =>
option.value ===
lang
)?.badge
}
</div>
))}
</div>
</HoverCardContent>
</HoverCard>
</span>
)}
</div>
</div>
),
},
// Temporary hide this column
// Temporary hide this column
// {
// accessorKey: "difficulty",
// header: ({ column }) => (
Expand All @@ -152,10 +197,13 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
{
accessorKey: "updated_date",
header: ({ column }) => (
<DataTableSortableLayout onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}>
<DataTableSortableLayout
onClick={() =>
column.toggleSorting(column.getIsSorted() === "asc")
}
>
Updated Date
</DataTableSortableLayout>

),
cell: ({ row }) => (
<div className="font-mono">
Expand All @@ -179,11 +227,7 @@ const columns: ColumnDef<ProblemPopulateTestcases>[] = [
// },
{
accessorKey: "action",
header: () => (
<div className="text-center">
Action
</div>
),
header: () => <div className="text-center">Action</div>,
cell: ({ row }) => (
<div className=" flex items-center justify-center">
<MyProblemDropdown problem={row.original}>
Expand Down
Loading