Merge pull request #133 from CS3219-AY2425S1/fix/admin-validation

minor fixes for admin validation

Author: Kurtyjlee

peerprep-fe/src/app/(main)/components/filter/TopicsPopover.tsx

@@ -7,19 +7,21 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
-import { Check, ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 interface TopicsPopoverProps {
   selectedTopics: string[];
   onChange: (value: string[]) => void;
+  isAdmin?: boolean;
 }
 
 export function TopicsPopover({
   selectedTopics,
   onChange,
+  isAdmin,
 }: TopicsPopoverProps) {
   const [open, setOpen] = useState(false);
   const [topics, setTopics] = useState<string[]>([]);
@@ -58,7 +60,7 @@ export function TopicsPopover({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[200px] p-0">
-        <div className="p-2">
+        <div className="flex gap-1 p-2">
           <Input
             placeholder="Search topics..."
             value={searchTerm}
@@ -68,8 +70,23 @@ export function TopicsPopover({
             }}
             className="mb-2"
           />
+          {isAdmin && (
+            <Button
+              onClick={async () => {
+                if (!searchTerm.trim()) {
+                  return;
+                }
+                setTopics((prev) => [...prev, searchTerm]);
+                setSearchTerm('');
+              }}
+              className="p-2"
+              variant="outline"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          )}
         </div>
-        <ScrollArea className="h-[300px]">
+        <ScrollArea className="h-[300px] overflow-y-auto">
           {filteredTopics.length === 0 ? (
             <p className="p-2 text-sm text-muted-foreground">No topic found.</p>
           ) : (

peerprep-fe/src/app/admin/page.tsx

@@ -23,6 +23,18 @@ function AdminPage() {
     refetchFilter,
   } = useFilteredProblems();
 
+  const validateEntries = (problem: Problem) => {
+    if (
+      problem.description === '' ||
+      problem.title === '' ||
+      problem.tags.length === 0
+    ) {
+      setInformationDialog('Please fill in all required fields');
+      return false;
+    }
+    return true;
+  };
+
   const handleDelete = async (id: number) => {
     const res = await axiosClient.delete(`/questions/${id}`);
     if (res.status !== 200) {
@@ -34,6 +46,9 @@ function AdminPage() {
 
   const handleEdit = async (problem: Problem) => {
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.put(`/questions/${problem._id}`, {
         difficulty: problem.difficulty,
         description: problem.description,
@@ -68,16 +83,10 @@ function AdminPage() {
   };
 
   const handleAdd = async (problem: Problem) => {
-    // TODO: Add proper validation of fields
-    if (
-      problem.description === '' ||
-      problem.title === '' ||
-      problem.tags.length === 0
-    ) {
-      setInformationDialog('Please fill in all required fields');
-      return;
-    }
     try {
+      if (!validateEntries(problem)) {
+        throw new Error('Invalid problem entries');
+      }
       const res = await axiosClient.post(`/questions`, {
         difficulty: problem.difficulty,
         description: problem.description,

peerprep-fe/src/components/dialogs/ActionDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -16,6 +16,7 @@ type Props = {
   description: string;
   callback?: () => void;
   callbackTitle?: string;
+  children?: ReactElement;
 };
 
 const ActionDialog = ({
@@ -26,18 +27,23 @@ const ActionDialog = ({
   description,
   callback,
   callbackTitle,
+  children,
 }: Props) => {
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="bg-black">
+      <DialogContent className="max-h-[80%] overflow-auto bg-black">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{subtitle}</DialogDescription>
         </DialogHeader>
-        <div className="mt-4">
-          <h3 className="mb-2 text-lg font-semibold">Description:</h3>
-          <p>{description}</p>
-        </div>
+        {children ? (
+          children
+        ) : (
+          <div className="mt-4">
+            <h3 className="mb-2 text-lg font-semibold">Description:</h3>
+            <p>{description}</p>
+          </div>
+        )}
         <div className="mt-6 flex justify-end">
           <Button variant="secondary" onClick={callback}>
             {callbackTitle}

peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx

@@ -5,21 +5,29 @@ import { Button } from '../ui/button';
 type Props = {
   problem: Problem;
   resetQuestion: () => void; // replace with something more generic
+  hasHeader?: boolean;
 };
 
-const ProblemDescriptionPanel = ({ problem, resetQuestion }: Props) => {
+const ProblemDescriptionPanel = ({
+  problem,
+  resetQuestion,
+  hasHeader = true,
+}: Props) => {
   return (
     <>
-      <div className="flex justify-between">
-        <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
-        <Button
-          variant="outline"
-          className="border-gray-700 bg-gray-800"
-          onClick={() => resetQuestion()}
-        >
-          Reset
-        </Button>
-      </div>
+      {hasHeader && (
+        <div className="flex justify-between">
+          <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
+          <Button
+            variant="outline"
+            className="border-gray-700 bg-gray-800"
+            onClick={() => resetQuestion()}
+          >
+            Reset
+          </Button>
+        </div>
+      )}
+
       <p className="mb-4">{problem.description}</p>
       {problem.examples.map((example, index) => (
         <React.Fragment key={index}>

peerprep-fe/src/components/problems/ProblemInputDialog.tsx

@@ -90,6 +90,7 @@ function ProblemInputDialog({
               onChange={(value) => {
                 setProblemData({ ...problemData, tags: value });
               }}
+              isAdmin
             />
           </div>
           <div className="mt-2 flex justify-end">

peerprep-fe/src/components/problems/ProblemRow.tsx

@@ -10,6 +10,7 @@ import InformationDialog from '../dialogs/InformationDialog';
 import ActionDialog from '../dialogs/ActionDialog';
 import { useRouter } from 'next/navigation';
 import { axiosClient } from '@/network/axiosClient';
+import ProblemDescriptionPanel from './ProblemDescriptionPanel';
 
 function ProblemStatus({ status }: { status: string }) {
   if (status === 'solved') {
@@ -156,7 +157,14 @@ export default function ProblemRow({
         description={problem.description}
         callback={handleMatch}
         callbackTitle="Match"
-      />
+      >
+        <ProblemDescriptionPanel
+          problem={problem}
+          resetQuestion={() => {}}
+          hasHeader={false}
+        />
+      </ActionDialog>
+
       {/* Dialog for deleting question */}
       <ActionDialog
         isOpen={isDeleteDialogOpen}