From d611f830c620bf6280c1fc7350be63897dba5738 Mon Sep 17 00:00:00 2001 From: KanonKC Date: Mon, 29 Jan 2024 23:54:10 +0700 Subject: [PATCH 1/3] Polised some ui --- @/components/ui/avatar.tsx | 48 +++++++ public/icon.png | Bin 0 -> 754 bytes .../Dropdowns/MyCollectionDropdown.tsx | 125 ++++++++++++++++++ src/components/Dropdowns/MyCourseDropdown.tsx | 125 ++++++++++++++++++ .../Forms/CreateCollectionForm/index.tsx | 4 +- .../Forms/CreateProblemForm/Scoring.tsx | 47 ++++--- .../NavigationBar/CourseNavSidebar.tsx | 6 +- src/components/NavigationBar/NavSidebar.tsx | 9 +- .../NavigationBar/NavigationBar.tsx | 16 ++- src/components/Tables/MyCollectionsTable.tsx | 28 +++- src/components/Tables/MyCoursesTable.tsx | 78 +++++++++++ src/components/Tables/MyGroupsTable.tsx | 61 +++++++++ .../Tables/MyPreviousSubmissionsTable.tsx | 20 ++- .../Tables/MyProblemSubmissionsTable.tsx | 20 ++- .../Tables/ProblemTables/MyProblemsTable.tsx | 26 ++-- .../TestcaseValidationAccordion.tsx | 4 +- src/components/TestcasesGradingIndicator.tsx | 2 +- src/components/shadcn/Avatar.tsx | 48 +++++++ src/views/Home.tsx | 10 ++ src/views/My/Courses/MyCourses.tsx | 5 +- src/views/My/Groups/MyGroups.tsx | 10 +- 21 files changed, 625 insertions(+), 67 deletions(-) create mode 100644 @/components/ui/avatar.tsx create mode 100644 public/icon.png create mode 100644 src/components/Dropdowns/MyCollectionDropdown.tsx create mode 100644 src/components/Dropdowns/MyCourseDropdown.tsx create mode 100644 src/components/Tables/MyCoursesTable.tsx create mode 100644 src/components/Tables/MyGroupsTable.tsx create mode 100644 src/components/shadcn/Avatar.tsx diff --git a/@/components/ui/avatar.tsx b/@/components/ui/avatar.tsx new file mode 100644 index 0000000..991f56e --- /dev/null +++ b/@/components/ui/avatar.tsx @@ -0,0 +1,48 @@ +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..b0ff77a5e2b132a3c630099ae242dc649b78d5c0 GIT binary patch literal 754 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!Lb6AYF9SoB8UsT^3j@P1pisjL z28L1t28LG&3=CE?7#PG0=Ijcz0ZKd!@Ck7R(#ae1Qa2W)t}jU4P?);DFlBu{!+(af zjX*X?FkwwDkW5^Y8?iAjZ9`$o+Wd%R$%$)o(>4?U)ugO1@LiT1wIVZWWmfXK0+0fr zmbH0_YxCmQ?NMQuIw)uW!afnW*$*p3=}%z>Eak7aapzhx=@n?kE=MNrdY@t!6RKwydfbXOK<%D z-+pG(bH&NFn@>IwYARrj6Zom*E-`71!+itx1uKI7=|vtEG-7KoGSxbeVm15L=T_zg zkM=y$3pd+zFX!Oe5KqDSs*oH1_-->j-1v^4vB)B6wctThnfE1phd+06P2`Bs_lfa6 zEbw{a3$Z)z5BBz6NfPm#u`IFZ%=By0hAuPzSNxFVnw#8i8-L<+uBDOfUd|6cgX;c@ zaVx)`uy}KU$L`B-JEgk+v)8YYtqBk{y9e}-YKdz^NlIc#s#S7PDv)9@GB7gHH89jQ zvJ5dWw=yuYGBDOQFt9Q(IQC858%0BIeoAIqC2kGdSI_?r)Sv;kp(HamwYVfPw*ZSC X6Nn|Mk`2p%dKf%i{an^LB{Ts5V0A?C literal 0 HcmV?d00001 diff --git a/src/components/Dropdowns/MyCollectionDropdown.tsx b/src/components/Dropdowns/MyCollectionDropdown.tsx new file mode 100644 index 0000000..4ada4bb --- /dev/null +++ b/src/components/Dropdowns/MyCollectionDropdown.tsx @@ -0,0 +1,125 @@ +import { CopyPlus, PencilIcon, Trash } from "lucide-react"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { CollectionService } from "../../services/Collection.service"; +import { ProblemService } from "../../services/Problem.service"; +import { transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest } from "../../types/adapters/Collection.adapter"; +import { transformCreateCollectionRequestForm2CreateCollectionRequestForm } from "../../types/adapters/CreateCollectionRequestForm.adapter"; +import { CollectionModel } from "../../types/models/Collection.model"; +import DeleteCollectionConfirmationDialog from "../Dialogs/DeleteCollectionConfirmationDialog"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../shadcn/DropdownMenu"; +import { toast } from "../shadcn/UseToast"; + +const MyCollectionDropdown = ({ + children, + collection, +}: { + children: React.ReactNode; + collection: CollectionModel; +}) => { + const accountId = String(localStorage.getItem("account_id")); + const navigate = useNavigate(); + const [openDeleteDialog, setOpenDeleteDialog] = useState(false); + + const handleCloneCollection = async () => { + const response = await CollectionService.get( + collection.collection_id, + accountId + ); + + let createRequest = + transformCollectionPopulateCollectionProblemsPopulateProblemAndCollectionGroupPermissionsPopulateGroupModel2CreateCollectionRequest( + response.data + ); + + createRequest.title += " (Copy)"; + + const { request, groups, problemIds, problemGroupPermissions } = + transformCreateCollectionRequestForm2CreateCollectionRequestForm( + createRequest + ); + + CollectionService.create(accountId, request) + .then((response) => { + return CollectionService.updateProblem( + response.data.collection_id, + problemIds + ); + }) + .then((response) => { + return CollectionService.updateGroupPermissions( + response.data.collection_id, + accountId, + groups + ); + }) + .then((response) => { + let promise = []; + for (const problem of problemGroupPermissions) { + promise.push( + ProblemService.updateGroupPermissions( + problem.problem_id, + accountId, + problem.groupPermissions + ) + ); + } + + return { + promise: Promise.all(promise), + collection_id: response.data.collection_id, + }; + }) + .then((response) => { + toast({ + title: "Create Completed", + }); + window.open(`/my/collections/${response.collection_id}`,'_blank'); + }); + }; + + return ( + + window.location.reload()} + /> + {children} + + +
{collection.name}
+ + + + navigate(`/my/collections/${collection.collection_id}/edit`) + } + > + + Edit Collection + + + + Clone Collection + + setOpenDeleteDialog(true)} + className="text-red-400" + > + + Delete Collection + + + + ); +}; + +export default MyCollectionDropdown; diff --git a/src/components/Dropdowns/MyCourseDropdown.tsx b/src/components/Dropdowns/MyCourseDropdown.tsx new file mode 100644 index 0000000..4616f3c --- /dev/null +++ b/src/components/Dropdowns/MyCourseDropdown.tsx @@ -0,0 +1,125 @@ +import { CopyPlus, PencilIcon, Trash } from "lucide-react"; +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { CollectionService } from "../../services/Collection.service"; +import { TopicService } from "../../services/Topic.service"; +import { transformCreateCourseRequestForm2CreateTopicRequest } from "../../types/adapters/CreateCourseRequestForm.adapter"; +import { transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest } from "../../types/adapters/Topic.adapter"; +import { TopicModel } from "../../types/models/Topic.model"; +import DeleteCourseConfirmationDialog from "../Dialogs/DeleteCourseConfirmationDialog"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "../shadcn/DropdownMenu"; +import { toast } from "../shadcn/UseToast"; + +const MyCourseDropdown = ({ + children, + course, +}: { + children: React.ReactNode; + course: TopicModel; +}) => { + const accountId = String(localStorage.getItem("account_id")); + const navigate = useNavigate(); + const [openDeleteDialog, setOpenDeleteDialog] = useState(false); + + const handleCloneCourse = async () => { + const response = await TopicService.get( + accountId, + course.topic_id + ); + + let createRequest = + transformTopicPopulateTopicCollectionPopulateCollectionAndTopicGroupPermissionPopulateGroupModel2CreateCourseRequest( + response.data + ); + + createRequest.title += " (Copy)"; + + const { formData, groups, collectionIds, collectionGroupsPermissions } = + transformCreateCourseRequestForm2CreateTopicRequest( + createRequest + ); + + TopicService.create(accountId, formData) + .then((response) => { + return TopicService.updateCollections( + response.data.topic_id, + collectionIds + ); + }) + .then((response) => { + return TopicService.updateGroupPermissions( + response.data.topic_id, + accountId, + groups + ); + }) + .then((response) => { + let promise = []; + for (const collection of collectionGroupsPermissions) { + promise.push( + CollectionService.updateGroupPermissions( + collection.collection_id, + accountId, + collection.groupPermissions + ) + ); + } + + return { + promise: Promise.all(promise), + topic_id: response.data.topic_id, + }; + }) + .then(({ topic_id }) => { + toast({ + title: "Create Completed", + }); + window.open(`/my/courses/${topic_id}`,'_blank'); + }); + }; + + return ( + + window.location.reload()} + /> + {children} + + +
{course.name}
+ + + + navigate(`/my/courses/${course.topic_id}/edit`) + } + > + + Edit Course + + + + Clone Course + + setOpenDeleteDialog(true)} + className="text-red-400" + > + + Delete Course + + + + ); +}; + +export default MyCourseDropdown; diff --git a/src/components/Forms/CreateCollectionForm/index.tsx b/src/components/Forms/CreateCollectionForm/index.tsx index a867716..62306b5 100644 --- a/src/components/Forms/CreateCollectionForm/index.tsx +++ b/src/components/Forms/CreateCollectionForm/index.tsx @@ -1,6 +1,6 @@ import { ArrowLeft } from "lucide-react"; import React, { useState } from "react"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useBeforeUnload, useNavigate, useSearchParams } from "react-router-dom"; import { CreateCollectionRequestForm } from "../../../types/forms/CreateCollectionRequestForm"; import { Tabs, TabsList, TabsTrigger } from "../../shadcn/Tabs"; import FormSaveButton from "../FormSaveButton"; @@ -49,6 +49,8 @@ const CreateCollectionForm = ({ }); }; + useBeforeUnload(() => "Some change has not been saved yet. Are you sure to close this tab?") + return (
diff --git a/src/components/Forms/CreateProblemForm/Scoring.tsx b/src/components/Forms/CreateProblemForm/Scoring.tsx index 1c14a2b..336f448 100644 --- a/src/components/Forms/CreateProblemForm/Scoring.tsx +++ b/src/components/Forms/CreateProblemForm/Scoring.tsx @@ -5,9 +5,7 @@ import { ProgrammingLanguageOptions } from "../../../constants/ProgrammingLangua import { ProblemService } from "../../../services/Problem.service"; import { ValidateProgramResponse } from "../../../types/apis/Problem.api"; import { CreateProblemRequestForm } from "../../../types/forms/CreateProblemRequestForm"; -import { - testcaseParse -} from "../../../utilities/TestcaseFormat"; +import { testcaseParse } from "../../../utilities/TestcaseFormat"; import TestcaseValidationAccordion from "../../TestcaseValidationAccordion"; import { Button } from "../../shadcn/Button"; import { Combobox } from "../../shadcn/Combobox"; @@ -27,7 +25,7 @@ const Scoring = ({ const [loading, setLoading] = useState(false); const [displayResult, setDisplayResult] = useState(false); - const [selectedLanguage, setSelectedLanguage] = useState("python"); + const [selectedLanguage, setSelectedLanguage] = useState(""); const [validationResult, setValidationResult] = useState(); @@ -35,10 +33,10 @@ const Scoring = ({ const handleValidation = () => { setLoading(true); - // console.log({ - // og: createRequest.testcases, - // testcaseFormat: testcaseFormat(createRequest.testcases) - // }); + if (!selectedLanguage) { + return; + } + ProblemService.validateProgram({ source_code: createRequest.solution.replace(/\r\n/g, "\n"), testcases: testcaseParse( @@ -56,8 +54,11 @@ const Scoring = ({ }; useEffect(() => { - console.log(selectedLanguage); - }, [selectedLanguage]); + console.log(createRequest) + if (createRequest.language) { + setSelectedLanguage(createRequest.language); + } + }, [createRequest]); return (
@@ -85,7 +86,6 @@ const Scoring = ({ setCreateRequest({ @@ -145,20 +145,19 @@ const Scoring = ({ )}
-
diff --git a/src/components/NavigationBar/CourseNavSidebar.tsx b/src/components/NavigationBar/CourseNavSidebar.tsx index fcddf23..b11f21a 100644 --- a/src/components/NavigationBar/CourseNavSidebar.tsx +++ b/src/components/NavigationBar/CourseNavSidebar.tsx @@ -3,7 +3,7 @@ import { useNavigate, useParams } from "react-router-dom"; import { CourseNavSidebarContext } from "../../contexts/CourseNavSidebarContexnt"; import { TopicService } from "../../services/Topic.service"; import { Separator } from "../shadcn/Seperator"; -import { ChevronLeft, ChevronRight, LibraryBig } from "lucide-react"; +import { ChevronLeft, ChevronRight, LibraryBig, X } from "lucide-react"; import NavbarCollectionsProblemsAccordion from "../NavbarCollectionsProblemsAccordion"; import { TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../types/models/Topic.model"; import { ScrollArea } from "../shadcn/ScrollArea"; @@ -74,7 +74,7 @@ const CourseNavSidebar = () => { onClick={() => setIsOpen(false)} className="cursor-pointer border-l py-4" > - +
@@ -87,7 +87,7 @@ const CourseNavSidebar = () => { ) : ( -
+
setIsOpen(true)} className="p-2 border-b cursor-pointer">
diff --git a/src/components/NavigationBar/NavSidebar.tsx b/src/components/NavigationBar/NavSidebar.tsx index 1727515..624c4bb 100644 --- a/src/components/NavigationBar/NavSidebar.tsx +++ b/src/components/NavigationBar/NavSidebar.tsx @@ -45,10 +45,11 @@ const NavSidebar = () => { return ( <> {!isOpen ? ( -
-
-
-

setIsOpen(true)}>Open

+
+
+
+ {/*

setIsOpen(true)}>Open

*/} +
navigate("/my/problems")} diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx index 666cd33..241ce1b 100644 --- a/src/components/NavigationBar/NavigationBar.tsx +++ b/src/components/NavigationBar/NavigationBar.tsx @@ -10,6 +10,7 @@ import { import { LoginContext } from "../../contexts/LoginContext"; import ProfileDropdown from './ProfileDropdown'; +import { LayoutDashboard, Library, StickyNote } from "lucide-react"; @@ -20,7 +21,7 @@ const NavigationBar = (/* { isLogin = false }: { isLogin?: boolean } */) => { const customNavigationMenuTriggerStyle = () => { return ( navigationMenuTriggerStyle() + - " bg-green-600 hover:bg-green-700 hover:text-white text-white cursor-pointer" + " bg-green-600 hover:bg-green-700 hover:text-white text-white cursor-pointer active:bg-green-800 active:text-white focus:bg-green-600 focus:text-white" ); }; @@ -33,15 +34,19 @@ const NavigationBar = (/* { isLogin = false }: { isLogin?: boolean } */) => {
- Home + {/* */} + + ModelGrader + Explore {/* { > Courses */} - + Dashboard - + } {/* diff --git a/src/components/Tables/MyCollectionsTable.tsx b/src/components/Tables/MyCollectionsTable.tsx index 94ab7d9..0060f38 100644 --- a/src/components/Tables/MyCollectionsTable.tsx +++ b/src/components/Tables/MyCollectionsTable.tsx @@ -1,9 +1,10 @@ import { ColumnDef } from '@tanstack/react-table' -import { FileSpreadsheet, Folder } from 'lucide-react' +import { FileSpreadsheet, Folder, MoreHorizontal } from 'lucide-react' import { Link } from 'react-router-dom' import { CollectionPopulateCollectionProblemPopulateProblemModel } from '../../types/models/Collection.model' import { readableDateFormat } from '../../utilities/ReadableDateFormat' import { DataTable } from './Prototype/DataTable' +import MyCollectionDropdown from '../Dropdowns/MyCollectionDropdown' const columns: ColumnDef[] = [ { @@ -37,15 +38,30 @@ const columns: ColumnDef ), }, - { - accessorKey: "created_date", - header: "Created Date", + { + accessorKey: "action", + header: () => ( +
+ Action +
+ ), cell: ({ row }) => ( -
- {readableDateFormat(row.original.created_date)} +
+ + +
), }, + // { + // accessorKey: "created_date", + // header: "Created Date", + // cell: ({ row }) => ( + //
+ // {readableDateFormat(row.original.created_date)} + //
+ // ), + // }, ] const MyCollectionsTable = ({ diff --git a/src/components/Tables/MyCoursesTable.tsx b/src/components/Tables/MyCoursesTable.tsx new file mode 100644 index 0000000..2064ebd --- /dev/null +++ b/src/components/Tables/MyCoursesTable.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../types/models/Topic.model"; +import { DataTable } from "./Prototype/DataTable"; +import { ColumnDef } from "@tanstack/react-table"; +import { Folder, LibraryBig, MoreHorizontal } from "lucide-react"; +import { Link } from "react-router-dom"; +import { readableDateFormat } from "../../utilities/ReadableDateFormat"; +import MyCourseDropdown from "../Dropdowns/MyCourseDropdown"; + +const MyCoursesTable = ({ + courses = [], +}: { + courses: TopicPopulateTopicCollectionPopulateCollectionModel[]; +}) => { + const columns: ColumnDef[] = + [ + { + accessorKey: "title", + header: "Title", + cell: ({ row }) => ( +
+ + + {row.original.name} + +
+ ), + }, + { + accessorKey: "collections", + header: "Collections", + cell: ({ row }) => ( +
+ + {row.original.collections.length} +
+ ), + }, + { + accessorKey: "updated_date", + header: "Updated Date", + cell: ({ row }) => ( +
+ {readableDateFormat(row.original.updated_date)} +
+ ), + }, + { + accessorKey: "action", + header: () => ( +
+ Action +
+ ), + cell: ({ row }) => ( +
+ + + +
+ ), + }, + ]; + + return ( +
+ +
+ ); +}; + +export default MyCoursesTable; diff --git a/src/components/Tables/MyGroupsTable.tsx b/src/components/Tables/MyGroupsTable.tsx new file mode 100644 index 0000000..456ca1a --- /dev/null +++ b/src/components/Tables/MyGroupsTable.tsx @@ -0,0 +1,61 @@ +import React from 'react' +import { GroupPopulateGroupMemberPopulateAccountSecureModel } from '../../types/models/Group.model' +import { ColumnDef } from '@tanstack/react-table' +import { DataTable } from './Prototype/DataTable' +import { User, Users } from 'lucide-react' +import { Link } from 'react-router-dom' +import { readableDateFormat } from '../../utilities/ReadableDateFormat' + +const MyGroupsTable = ({ + groups=[] +}:{ + groups: GroupPopulateGroupMemberPopulateAccountSecureModel[] +}) => { + + const column:ColumnDef[] = [ + { + accessorKey: "name", + header: "Title", + cell: ({ row }) => ( +
+ + + {row.original.name} + +
+ ) + }, + { + accessorKey: "members", + header: "Members", + cell: ({ row }) => ( +
+ + {row.original.members.length} +
+ ) + }, + { + accessorKey: "updated_date", + header: "Updated Date", + cell: ({ row }) => ( +
+ {readableDateFormat(row.original.updated_date)} +
+ ), + }, + ] + + return ( +
+ +
+ ) +} + +export default MyGroupsTable \ No newline at end of file diff --git a/src/components/Tables/MyPreviousSubmissionsTable.tsx b/src/components/Tables/MyPreviousSubmissionsTable.tsx index 814eee6..231f999 100644 --- a/src/components/Tables/MyPreviousSubmissionsTable.tsx +++ b/src/components/Tables/MyPreviousSubmissionsTable.tsx @@ -1,5 +1,5 @@ import { ColumnDef } from "@tanstack/react-table"; -import { LibraryBig } from "lucide-react"; +import { Check, LibraryBig, X } from "lucide-react"; import { Link } from "react-router-dom"; import { ProgrammingLanguageOptions } from "../../constants/ProgrammingLanguage"; import { SubmissionPopulateSubmissionTestcaseAndProblemSecureModel } from "../../types/models/Submission.model"; @@ -67,6 +67,24 @@ const MyPreviousSubmissionsTable = ({
), }, + { + accessorKey: "is_passed", + header: () =>
+ + Is Passed +
, + cell: ({ row }) => { + return ( +
+ {row.original.is_passed ? ( + + ) : ( + + )} +
+ ); + }, + }, { accessorKey: "runtime_result", header: "Runtime Result", diff --git a/src/components/Tables/MyProblemSubmissionsTable.tsx b/src/components/Tables/MyProblemSubmissionsTable.tsx index 43ffbab..4a51e7d 100644 --- a/src/components/Tables/MyProblemSubmissionsTable.tsx +++ b/src/components/Tables/MyProblemSubmissionsTable.tsx @@ -1,5 +1,5 @@ import { ColumnDef } from "@tanstack/react-table"; -import { LibraryBig, Maximize2 } from "lucide-react"; +import { Check, LibraryBig, Maximize2, X } from "lucide-react"; import { ProgrammingLanguageOptions } from "../../constants/ProgrammingLanguage"; import { ProblemPopulateAccountAndTestcasesAndProblemGroupPermissionsPopulateGroupModel } from "../../types/models/Problem.model"; import { SubmissionPopulateSubmissionTestcaseAndAccountModel } from "../../types/models/Submission.model"; @@ -67,6 +67,24 @@ const MyProblemSubmissionsTable = ({
), }, + { + accessorKey: "is_passed", + header: () =>
+ + Is Passed +
, + cell: ({ row }) => { + return ( +
+ {row.original.is_passed ? ( + + ) : ( + + )} +
+ ); + }, + }, { accessorKey: "runtime_result", header: "Runtime Result", diff --git a/src/components/Tables/ProblemTables/MyProblemsTable.tsx b/src/components/Tables/ProblemTables/MyProblemsTable.tsx index 74bff21..3f8097d 100644 --- a/src/components/Tables/ProblemTables/MyProblemsTable.tsx +++ b/src/components/Tables/ProblemTables/MyProblemsTable.tsx @@ -183,20 +183,20 @@ const columns: ColumnDef[] = [
), }, - { - accessorKey: "created_date", - header: ({ column }) => ( - column.toggleSorting(column.getIsSorted() === "asc")}> - Created Date - + // { + // accessorKey: "created_date", + // header: ({ column }) => ( + // column.toggleSorting(column.getIsSorted() === "asc")}> + // Created Date + // - ), - cell: ({ row }) => ( -
- {readableDateFormat(row.original.created_date)} -
- ), - }, + // ), + // cell: ({ row }) => ( + //
+ // {readableDateFormat(row.original.created_date)} + //
+ // ), + // }, { accessorKey: "action", header: () => ( diff --git a/src/components/TestcaseValidationAccordion.tsx b/src/components/TestcaseValidationAccordion.tsx index a9e42d0..66311d7 100644 --- a/src/components/TestcaseValidationAccordion.tsx +++ b/src/components/TestcaseValidationAccordion.tsx @@ -34,9 +34,9 @@ const TestcaseValidationInstance = ({ Testcase #{value} {status === "OK" ? ( - OK + OK ) : status === "ERROR" ? ( - ERROR + ERROR ) : status === "TIMEOUT" ? ( TIMEOUT ) : ( diff --git a/src/components/TestcasesGradingIndicator.tsx b/src/components/TestcasesGradingIndicator.tsx index 6ff5b3f..f7b152f 100644 --- a/src/components/TestcasesGradingIndicator.tsx +++ b/src/components/TestcasesGradingIndicator.tsx @@ -70,7 +70,7 @@ const TestcaseGradingResult = ({

Time Used:{" "} - 1.234 seconds + -.--- seconds

)} diff --git a/src/components/shadcn/Avatar.tsx b/src/components/shadcn/Avatar.tsx new file mode 100644 index 0000000..1b8d07f --- /dev/null +++ b/src/components/shadcn/Avatar.tsx @@ -0,0 +1,48 @@ +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "../../lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 6b82ace..4721e04 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,11 +1,21 @@ +import { Button } from "../components/shadcn/Button"; import CenterContainer from "../layout/CenterLayout"; const Home = () => { return ( +

Welcome to Grader

+ + {/*
*/} + + {/*
+ + +
*/} + ); }; diff --git a/src/views/My/Courses/MyCourses.tsx b/src/views/My/Courses/MyCourses.tsx index cbe5671..92364be 100644 --- a/src/views/My/Courses/MyCourses.tsx +++ b/src/views/My/Courses/MyCourses.tsx @@ -10,6 +10,7 @@ import { NavSidebarContext } from "../../../contexts/NavSidebarContext"; import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout"; import { TopicService } from "../../../services/Topic.service"; import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../../types/models/Topic.model"; +import MyCoursesTable from "../../../components/Tables/MyCoursesTable"; const MyCourses = () => { @@ -82,9 +83,7 @@ const MyCourses = () => { { - tabValue === "personal" && filteredTopics.map(topic => ( - - )) + tabValue === "personal" && } { tabValue === "manageable" && filteredManageableTopics.map(topic => ( diff --git a/src/views/My/Groups/MyGroups.tsx b/src/views/My/Groups/MyGroups.tsx index cbd2840..d2ebd88 100644 --- a/src/views/My/Groups/MyGroups.tsx +++ b/src/views/My/Groups/MyGroups.tsx @@ -9,6 +9,7 @@ import { NavSidebarContext } from "../../../contexts/NavSidebarContext"; import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout"; import { GroupService } from "../../../services/Group.service"; import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../../../types/models/Group.model"; +import MyGroupsTable from "../../../components/Tables/MyGroupsTable"; const MyGroups = () => { @@ -62,9 +63,12 @@ const MyGroups = () => { { - filteredGroups.map((group) => ( - - )) + + // filteredGroups.map((group) => ( + // + // )) }
From 4a219532e60bae362f3d00c4f357e71f4f188349 Mon Sep 17 00:00:00 2001 From: KanonKC Date: Tue, 30 Jan 2024 00:25:06 +0700 Subject: [PATCH 2/3] Clear warnings --- src/components/NavigationBar/CourseNavSidebar.tsx | 6 +++--- src/components/Tables/MyCoursesTable.tsx | 5 ++--- src/components/Tables/MyGroupsTable.tsx | 5 ++--- src/views/My/Groups/MyGroups.tsx | 3 +-- 4 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/components/NavigationBar/CourseNavSidebar.tsx b/src/components/NavigationBar/CourseNavSidebar.tsx index b11f21a..b530f40 100644 --- a/src/components/NavigationBar/CourseNavSidebar.tsx +++ b/src/components/NavigationBar/CourseNavSidebar.tsx @@ -1,12 +1,12 @@ +import { ChevronRight, LibraryBig, X } from "lucide-react"; import { useContext, useEffect } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { CourseNavSidebarContext } from "../../contexts/CourseNavSidebarContexnt"; import { TopicService } from "../../services/Topic.service"; -import { Separator } from "../shadcn/Seperator"; -import { ChevronLeft, ChevronRight, LibraryBig, X } from "lucide-react"; -import NavbarCollectionsProblemsAccordion from "../NavbarCollectionsProblemsAccordion"; import { TopicCollectionPopulateCollectionPopulateCollectionProblemPopulateProblemPopulateAccountAndSubmissionPopulateSubmissionTestcasesSecureModel } from "../../types/models/Topic.model"; +import NavbarCollectionsProblemsAccordion from "../NavbarCollectionsProblemsAccordion"; import { ScrollArea } from "../shadcn/ScrollArea"; +import { Separator } from "../shadcn/Seperator"; const CourseNavSidebar = () => { const navigate = useNavigate(); diff --git a/src/components/Tables/MyCoursesTable.tsx b/src/components/Tables/MyCoursesTable.tsx index 2064ebd..ad38364 100644 --- a/src/components/Tables/MyCoursesTable.tsx +++ b/src/components/Tables/MyCoursesTable.tsx @@ -1,11 +1,10 @@ -import React from "react"; -import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../types/models/Topic.model"; -import { DataTable } from "./Prototype/DataTable"; import { ColumnDef } from "@tanstack/react-table"; import { Folder, LibraryBig, MoreHorizontal } from "lucide-react"; import { Link } from "react-router-dom"; +import { TopicPopulateTopicCollectionPopulateCollectionModel } from "../../types/models/Topic.model"; import { readableDateFormat } from "../../utilities/ReadableDateFormat"; import MyCourseDropdown from "../Dropdowns/MyCourseDropdown"; +import { DataTable } from "./Prototype/DataTable"; const MyCoursesTable = ({ courses = [], diff --git a/src/components/Tables/MyGroupsTable.tsx b/src/components/Tables/MyGroupsTable.tsx index 456ca1a..7326898 100644 --- a/src/components/Tables/MyGroupsTable.tsx +++ b/src/components/Tables/MyGroupsTable.tsx @@ -1,10 +1,9 @@ -import React from 'react' -import { GroupPopulateGroupMemberPopulateAccountSecureModel } from '../../types/models/Group.model' import { ColumnDef } from '@tanstack/react-table' -import { DataTable } from './Prototype/DataTable' import { User, Users } from 'lucide-react' import { Link } from 'react-router-dom' +import { GroupPopulateGroupMemberPopulateAccountSecureModel } from '../../types/models/Group.model' import { readableDateFormat } from '../../utilities/ReadableDateFormat' +import { DataTable } from './Prototype/DataTable' const MyGroupsTable = ({ groups=[] diff --git a/src/views/My/Groups/MyGroups.tsx b/src/views/My/Groups/MyGroups.tsx index d2ebd88..b1f2d02 100644 --- a/src/views/My/Groups/MyGroups.tsx +++ b/src/views/My/Groups/MyGroups.tsx @@ -2,14 +2,13 @@ import { LibraryBig } from "lucide-react"; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import CardContainer from "../../../components/CardContainer"; -import MyGroupCard from "../../../components/Cards/MyGroupCard"; +import MyGroupsTable from "../../../components/Tables/MyGroupsTable"; import { Button } from "../../../components/shadcn/Button"; import { Input } from "../../../components/shadcn/Input"; import { NavSidebarContext } from "../../../contexts/NavSidebarContext"; import NavbarSidebarLayout from "../../../layout/NavbarSidebarLayout"; import { GroupService } from "../../../services/Group.service"; import { GroupPopulateGroupMemberPopulateAccountSecureModel } from "../../../types/models/Group.model"; -import MyGroupsTable from "../../../components/Tables/MyGroupsTable"; const MyGroups = () => { From a37044b3a070ccf14e1c0d0ba311b3c2ff9aca6d Mon Sep 17 00:00:00 2001 From: KanonKC Date: Tue, 30 Jan 2024 00:25:19 +0700 Subject: [PATCH 3/3] Clear more --- src/views/Home.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/Home.tsx b/src/views/Home.tsx index 4721e04..2a09e19 100644 --- a/src/views/Home.tsx +++ b/src/views/Home.tsx @@ -1,4 +1,3 @@ -import { Button } from "../components/shadcn/Button"; import CenterContainer from "../layout/CenterLayout"; const Home = () => {