From 19a92990c79f6d035eb45d4bcc503bc9d7972aa2 Mon Sep 17 00:00:00 2001
From: danieldeng2 <danieldeng223@gmail.com>
Date: Wed, 12 Aug 2020 22:32:16 +0100
Subject: [PATCH] Add filtered work due to module view
---
.../components/atoms/SideBarCard/index.tsx | 20 +++++++---
.../atoms/SideBarCard/style.module.scss | 4 ++
.../molecules/CalendarGroup/index.tsx | 14 +++----
.../molecules/WorkDueGroup/index.tsx | 39 ++++++++++++-------
.../organisms/LeftBarModule/index.tsx | 2 +
.../organisms/LeftBarModuleList/index.tsx | 2 +
.../pages/ModuleResources/index.tsx | 1 -
7 files changed, 55 insertions(+), 27 deletions(-)
diff --git a/frontend/src/components/atoms/SideBarCard/index.tsx b/frontend/src/components/atoms/SideBarCard/index.tsx
index b3c7ac823..56c594225 100644
--- a/frontend/src/components/atoms/SideBarCard/index.tsx
+++ b/frontend/src/components/atoms/SideBarCard/index.tsx
@@ -6,7 +6,7 @@ import classNames from "classnames";
export interface SideBarCardProps {
type: eventTypes;
title: string;
- subtitle: string;
+ subtitle?: string;
content?: string;
}
@@ -23,12 +23,20 @@ const SideBarCard: React.FC<SideBarCardProps> = ({
content,
}: SideBarCardProps) => {
return (
- <Card className={classNames(styles.sideBarCard, getStyle(type))}>
+ <Card
+ className={classNames(
+ styles.sideBarCard,
+ getStyle(type),
+ subtitle === undefined && content === undefined
+ ? styles.sideBarEmptyCard
+ : ""
+ )}
+ >
<Card.Body>
- <Card.Title>
- {title}
- </Card.Title>
- <Card.Subtitle>{subtitle}</Card.Subtitle>
+ <Card.Title>{title}</Card.Title>
+ {subtitle !== undefined ? (
+ <Card.Subtitle>{subtitle}</Card.Subtitle>
+ ) : null}
{content !== undefined ? <Card.Text>{content}</Card.Text> : null}
</Card.Body>
</Card>
diff --git a/frontend/src/components/atoms/SideBarCard/style.module.scss b/frontend/src/components/atoms/SideBarCard/style.module.scss
index a153e0580..6e45d1356 100644
--- a/frontend/src/components/atoms/SideBarCard/style.module.scss
+++ b/frontend/src/components/atoms/SideBarCard/style.module.scss
@@ -52,6 +52,10 @@ $deadline-background: transparentize($teal-100, 0.5);
font-weight: 500;
}
+.sideBarEmptyCard :global(.card-title) {
+ margin-bottom: 0 !important;
+}
+
.sideBarCard :global(.card-subtitle) {
font-size: 1rem;
font-weight: 500;
diff --git a/frontend/src/components/molecules/CalendarGroup/index.tsx b/frontend/src/components/molecules/CalendarGroup/index.tsx
index 0875f9ca7..3d5ac9a37 100644
--- a/frontend/src/components/molecules/CalendarGroup/index.tsx
+++ b/frontend/src/components/molecules/CalendarGroup/index.tsx
@@ -9,17 +9,17 @@ const CalendarGroup: React.FC = () => {
events={events.map(({ type, title, subtitle, content }) => {
let colorType: eventTypes;
switch (type) {
- case "lecture":
+ case "Lecture":
colorType = eventTypes.BlueCard;
break;
- case "labs":
+ case "Labs":
colorType = eventTypes.RedCard;
break;
default:
colorType = eventTypes.GreenCard;
break;
}
- return { title, subtitle, content, type: colorType };
+ return { title : `${type}: ${title}`, subtitle, content, type: colorType };
})}
/>
);
@@ -29,25 +29,25 @@ export default CalendarGroup;
let events = [
{
- type: "lecture",
+ type: "Lecture",
title: "CO142",
subtitle: "09:00 - 11:00",
content: "308, Huxley Building, South Kensington Campus",
},
{
- type: "lecture",
+ type: "Lecture",
title: "CO145",
subtitle: "13:00 - 14:00",
content: "311, Huxley Building, South Kensington Campus",
},
{
- type: "labs",
+ type: "Labs",
title: "CO161",
subtitle: "15:00 - 17:00",
content: "219, Huxley Building, South Kensington Campus",
},
{
- type: "deadline",
+ type: "Deadline",
title: "CO120.1",
subtitle: "19:00",
content: "Haskell L Systems",
diff --git a/frontend/src/components/molecules/WorkDueGroup/index.tsx b/frontend/src/components/molecules/WorkDueGroup/index.tsx
index 0192b3a3c..6651d08bf 100644
--- a/frontend/src/components/molecules/WorkDueGroup/index.tsx
+++ b/frontend/src/components/molecules/WorkDueGroup/index.tsx
@@ -2,22 +2,35 @@ import React from "react";
import SideBarCardGroup from "../SideBarCardGroup";
import { eventTypes } from "components/atoms/SideBarCard";
-const WorkDueGroup: React.FC = () => {
+export interface WorkDueGroupProps {
+ filter?: String;
+}
+
+const WorkDueGroup: React.FC<WorkDueGroupProps> = ({
+ filter,
+}: WorkDueGroupProps) => {
return (
<SideBarCardGroup
title="Work Due"
- events={events.map(({ type, title, subtitle }) => {
- let colorType: eventTypes;
- switch (type) {
- case "tutorial":
- colorType = eventTypes.BlueCard;
- break;
- default:
- colorType = eventTypes.GreenCard;
- break;
- }
- return { title, subtitle, type: colorType };
- })}
+ events={events
+ .filter(({ subtitle }) => filter === undefined || subtitle === filter)
+ .map(({ type, title, subtitle }) => {
+ let colorType: eventTypes;
+ switch (type) {
+ case "tutorial":
+ colorType = eventTypes.BlueCard;
+ break;
+ default:
+ colorType = eventTypes.GreenCard;
+ break;
+ }
+
+ return {
+ title,
+ subtitle: filter === undefined ? subtitle : undefined,
+ type: colorType,
+ };
+ })}
/>
);
};
diff --git a/frontend/src/components/organisms/LeftBarModule/index.tsx b/frontend/src/components/organisms/LeftBarModule/index.tsx
index fd775a965..a656f30f2 100644
--- a/frontend/src/components/organisms/LeftBarModule/index.tsx
+++ b/frontend/src/components/organisms/LeftBarModule/index.tsx
@@ -3,6 +3,7 @@ import LeftBar from "components/organisms/LeftBar";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
import { faUserFriends } from "@fortawesome/free-solid-svg-icons";
import { useParams } from "react-router-dom";
+import WorkDueGroup from "components/molecules/WorkDueGroup";
const LeftBarModule: React.FC = () => {
let { id } = useParams();
@@ -49,6 +50,7 @@ const LeftBarModule: React.FC = () => {
return (
<LeftBar>
<SideBarTabGroup title="Outline" buttons={outlineButtons} />
+ <WorkDueGroup filter={id}/>
</LeftBar>
);
};
diff --git a/frontend/src/components/organisms/LeftBarModuleList/index.tsx b/frontend/src/components/organisms/LeftBarModuleList/index.tsx
index 5a21ac976..4c3d67e81 100644
--- a/frontend/src/components/organisms/LeftBarModuleList/index.tsx
+++ b/frontend/src/components/organisms/LeftBarModuleList/index.tsx
@@ -1,6 +1,7 @@
import React from "react";
import LeftBar from "components/organisms/LeftBar";
import SideBarTabGroup from "components/molecules/SideBarTabGroup";
+import WorkDueGroup from "components/molecules/WorkDueGroup";
const LeftBarModuleList: React.FC = () => {
let sortButtons = [
@@ -22,6 +23,7 @@ const LeftBarModuleList: React.FC = () => {
return (
<LeftBar>
<SideBarTabGroup title="Sort" buttons={sortButtons} />
+ <WorkDueGroup/>
</LeftBar>
);
};
diff --git a/frontend/src/components/pages/ModuleResources/index.tsx b/frontend/src/components/pages/ModuleResources/index.tsx
index 8c4f809ef..cc7e5dda1 100644
--- a/frontend/src/components/pages/ModuleResources/index.tsx
+++ b/frontend/src/components/pages/ModuleResources/index.tsx
@@ -1,7 +1,6 @@
import React, { useEffect, useState } from "react";
import styles from "./style.module.scss";
-import classNames from "classnames";
import { request } from "../../../utils/api"
import { api } from "../../../constants/routes"
import MyBreadcrumbs from "components/atoms/MyBreadcrumbs";
--
GitLab