Skip to content

Commit 304912d

Browse files
kevin-lannkevin-lann
authored
Kl/scrum 166 restrictions hide (#122)
Co-authored-by: kevin-lann <[email protected]>
1 parent 1230a30 commit 304912d

File tree

1 file changed

+82
-72
lines changed

1 file changed

+82
-72
lines changed

‎course-matrix/frontend/src/pages/TimetableBuilder/TimetableBuilder.tsx‎

Lines changed: 82 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -459,9 +459,12 @@ const TimetableBuilder = () => {
459459
<Checkbox
460460
id="manual-selection"
461461
checked={isChoosingSectionsManually}
462-
onCheckedChange={(checked) =>
463-
setIsChoosingSectionsManually(checked === true)
464-
}
462+
onCheckedChange={(checked) => {
463+
setIsChoosingSectionsManually(checked === true);
464+
if (checked) {
465+
form.setValue("restrictions", []);
466+
}
467+
}}
465468
/>
466469
<label
467470
htmlFor="manual-selection"
@@ -524,78 +527,85 @@ const TimetableBuilder = () => {
524527
)}
525528
</div>
526529
</div>
527-
528-
<div className="flex gap-12 items-end">
529-
<div className="flex flex-col gap-2">
530-
<h2 className="text-lg">Custom Settings</h2>
531-
<p className="text-sm text-gray-500">
532-
Add additional restrictions to your timetable to
533-
personalize it to your needs.
534-
</p>
535-
</div>
536-
<Button
537-
size="sm"
538-
variant="secondary"
539-
type="button"
540-
onClick={() => setIsCustomSettingsOpen(true)}
541-
>
542-
+ Add new
543-
</Button>
544-
</div>
545-
546-
<div className="flex flex-col">
547-
<FormField
548-
control={form.control}
549-
name="restrictions"
550-
render={() => (
551-
<FormItem className="pb-2">
552-
<p className="text-sm">
553-
Enabled Restrictions: {enabledRestrictions.length}
530+
{(!isChoosingSectionsManually || isEditingTimetable) && (
531+
<>
532+
<div className="flex gap-12 items-end">
533+
<div className="flex flex-col gap-2">
534+
<h2 className="text-lg">Custom Settings</h2>
535+
<p className="text-sm text-gray-500">
536+
{!isEditingTimetable
537+
? "Add additional restrictions to your timetable to personalize it to your needs."
538+
: "This timetable was created with the following restrictions:"}
554539
</p>
555-
<FormMessage />
556-
</FormItem>
557-
)}
558-
/>
559-
<div className="flex gap-2 flex-col">
560-
{enabledRestrictions &&
561-
enabledRestrictions.map((restric, index) => (
562-
<div
563-
key={index}
564-
className="flex p-2 justify-between bg-red-100/50 text-xs rounded-md w-[64%]"
565-
>
566-
{restric.type.startsWith("Restrict") ? (
567-
<p>
568-
<strong>{restric.type}:</strong>{" "}
569-
{restric.startTime
570-
? formatTime(restric.startTime)
571-
: ""}{" "}
572-
{restric.type === "Restrict Between" ? " - " : ""}{" "}
573-
{restric.endTime
574-
? formatTime(restric.endTime)
575-
: ""}{" "}
576-
{restric.days?.join(" ")}
577-
</p>
578-
) : restric.type.startsWith("Days") ? (
579-
<p>
580-
<strong>{restric.type}:</strong> At least{" "}
581-
{restric.numDays} days off
582-
</p>
583-
) : (
584-
<p>
585-
<strong>{restric.type}:</strong> {restric.maxGap}{" "}
586-
hours
540+
</div>
541+
<Button
542+
size="sm"
543+
variant="secondary"
544+
type="button"
545+
onClick={() => setIsCustomSettingsOpen(true)}
546+
className={isEditingTimetable ? "hidden" : ""}
547+
>
548+
+ Add new
549+
</Button>
550+
</div>
551+
552+
<div className="flex flex-col">
553+
<FormField
554+
control={form.control}
555+
name="restrictions"
556+
render={() => (
557+
<FormItem className="pb-2">
558+
<p className="text-sm">
559+
Enabled Restrictions: {enabledRestrictions.length}
587560
</p>
588-
)}
561+
<FormMessage />
562+
</FormItem>
563+
)}
564+
/>
565+
<div className="flex gap-2 flex-col">
566+
{enabledRestrictions &&
567+
enabledRestrictions.map((restric, index) => (
568+
<div
569+
key={index}
570+
className="flex p-2 justify-between bg-red-100/50 text-xs rounded-md w-[64%]"
571+
>
572+
{restric.type.startsWith("Restrict") ? (
573+
<p>
574+
<strong>{restric.type}:</strong>{" "}
575+
{restric.startTime
576+
? formatTime(restric.startTime)
577+
: ""}{" "}
578+
{restric.type === "Restrict Between"
579+
? " - "
580+
: ""}{" "}
581+
{restric.endTime
582+
? formatTime(restric.endTime)
583+
: ""}{" "}
584+
{restric.days?.join(" ")}
585+
</p>
586+
) : restric.type.startsWith("Days") ? (
587+
<p>
588+
<strong>{restric.type}:</strong> At least{" "}
589+
{restric.numDays} days off
590+
</p>
591+
) : (
592+
<p>
593+
<strong>{restric.type}:</strong>{" "}
594+
{restric.maxGap} hours
595+
</p>
596+
)}
589597

590-
<X
591-
size={16}
592-
className="hover:text-red-500 cursor-pointer"
593-
onClick={() => handleRemoveRestriction(index)}
594-
/>
595-
</div>
596-
))}
597-
</div>
598-
</div>
598+
<X
599+
size={16}
600+
className={`hover:text-red-500 cursor-pointer ${isEditingTimetable ? "hidden" : ""}`}
601+
onClick={() => handleRemoveRestriction(index)}
602+
/>
603+
</div>
604+
))}
605+
</div>
606+
</div>
607+
</>
608+
)}
599609

600610
{!isChoosingSectionsManually && (
601611
<div className="w-[100px]">

0 commit comments

Comments
 (0)