styled table and card

2020-11-26 01:53:07 +01:00 · 2020-11-26 01:53:07 +01:00 · 3f0aaf42ca
parent d384b248e5
commit 3f0aaf42ca
5 changed files with 127 additions and 84 deletions
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@ -1,9 +1,9 @@
 import React, { useState, useContext } from 'react';
 import Collapse from '@material-ui/core/Collapse';
 import { ReactComponent as Expand } from '../assets/expand.svg';
-import { Course, Group } from '../types/index';
+import { Course, Group, GroupType } from '../types/index';
 import { coursesContext } from '../contexts/CoursesProvider';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { makeStyles } from '@material-ui/core/styles';
 import { ReactComponent as Bin } from '../assets/bin.svg';
 import DeleteIcon from '@material-ui/icons/Delete';
@ -12,7 +12,7 @@ const CourseCardWrapper = styled.div`
  position: relative;
  display: flex;
  min-height: 40px;
-  background-color: rgb(166, 226, 208);
+  background-color: #b5d2e0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
@ -51,7 +51,7 @@ const CourseName = styled.div`
 const ClassGroupStyled = styled.div`
  position: relative;
  padding-top: 1px;
-  padding-bottom: 1px;
+  padding-bottom: 5px;
  :hover {
    cursor: pointer;
    background-color: #9ed3ff;
@ -74,16 +74,40 @@ const ExpandIcon = styled(Expand)<ExpandIconProps>`
  transform: ${({ selected }) => (selected ? 'scaleY(-1);' : 'scaleY(1);')};
 `;

-const TypeClass = styled.div`
+type StyledGroupTypeProps = {
+  groupType: GroupType;
+};
+
+const StyledGroupType = styled.div<StyledGroupTypeProps>`
  font-size: 12px;
  position: absolute;
  border-radius: 15px;
-  background-color: #00506b;
+  background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
  border: 2px solid white;
  min-width: 45px;
  top: 5px;
  left: 5px;
-  color: white;
+  color: black;
+`;
+
+const FlexboxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+type FlexItemProps = {
+  justifyContent?: string;
+};
+
+const FlexItem = styled.div<FlexItemProps>`
+  display: flex;
+  font-size: 14px;
+  font-weight: 600;
+  ${({ justifyContent }) =>
+    justifyContent &&
+    css`
+      justify-content: ${justifyContent};
+    `}
 `;

 const useStyles = makeStyles({
@ -120,18 +144,35 @@ export const CourseCard = ({ course }: CourseCardProps) => {

  return (
    <CourseCardWrapper>
-      <TitleWrapper>
-        <BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
+      <TitleWrapper onClick={() => setSelected(!isSelected)}>
+        <BinIcon
+          onClick={(e) => {
+            e.stopPropagation();
+            deleteFromBasket(course.id);
+            setSelected(false);
+          }}
+        ></BinIcon>
        <CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
        <ExpandIcon onClick={() => setSelected(!isSelected)} selected={isSelected} />
      </TitleWrapper>
      <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
        {groups.map((group, index) => (
          <ClassGroupStyled key={index} onClick={() => onGroupClick(group, course.id)}>
-            <TypeClass>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</TypeClass>
-            <p>
-              {group.time} {group.room} <br></br> {group.lecturer}
-            </p>
+            <StyledGroupType groupType={group.type}>{group.type === 'CLASS' ? 'ĆW' : 'WYK'}</StyledGroupType>
+            <FlexboxWrapper>
+              {group.lecturer.replace('UAM', '').length >= 32 ? (
+                <FlexItem style={{ justifyContent: 'center', marginLeft: '40px' }}>
+                  {group.lecturer.replace('UAM', '')}
+                </FlexItem>
+              ) : (
+                <FlexItem style={{ justifyContent: 'center', marginLeft: '10px' }}>
+                  {group.lecturer.replace('UAM', '')}
+                </FlexItem>
+              )}
+              <FlexItem style={{ justifyContent: 'center', margin: '0 50px' }}>
+                <span>{/*group.time*/}</span> <span> Sala: {group.room}</span>
+              </FlexItem>
+            </FlexboxWrapper>
          </ClassGroupStyled>
        ))}
      </Collapse>
--- a/src/components/Rightbar.tsx
+++ b/src/components/Rightbar.tsx
@ -4,10 +4,8 @@ import { coursesContext } from '../contexts/CoursesProvider';
 import styled from 'styled-components';
 import { debounce } from '../utils/index';

-const RightbarStyled = styled.div`
-  padding-top: 10px;
-  padding-left: 15px;
-  padding-right: 15px;
+const RightbarWrapper = styled.div`
+  padding: 15px;
  text-align: center;
  height: 100%;
  width: 350px;
@ -32,15 +30,21 @@ const SaveButton = styled.div`
  justify-content: center;
  align-items: center;
  user-select: none;
-  background-color: #244a7c;
+  background-color: #43a047;
  border-radius: 10px;
  cursor: pointer;
  height: 40px;
  margin-bottom: 10px;
  &:hover {
-    color: white;
+    color: #ffffff;
+    box-shadow: 0px 5px 4px 0px rgba(0, 0, 0, 0.24);
  }
-  box-shadow: 6px 6px 6px -2px rgba(0, 0, 0, 0.59);
+
+  &:active {
+    background-color: #54c457;
+  }
+
+  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.24);
 `;

 export const Rightbar = () => {
@ -50,11 +54,11 @@ export const Rightbar = () => {
  const handleSave = debounce(() => saveBasket(), 500);

  return (
-    <RightbarStyled>
+    <RightbarWrapper>
      <SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
-      {basketCourses.map((course, index) => (
-        <CourseCard course={course} key={index} />
+      {basketCourses.map((course) => (
+        <CourseCard course={course} key={course.id} />
      ))}
-    </RightbarStyled>
+    </RightbarWrapper>
  );
 };
--- a/src/components/Scheduler.tsx
+++ b/src/components/Scheduler.tsx
@ -43,9 +43,9 @@ interface TableCellProps {
 }

 const TableCell = styled.div<TableCellProps>`
-  border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
+  border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
  border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
-  border-color: rgb(242, 243, 245);
+  border-color: rgb(235, 235, 235);
  display: flex;
  align-items: center;
  justify-content: ${({ isHourColumn }) => (isHourColumn ? 'flex-end' : 'center')};
@ -56,13 +56,12 @@ const TableCell = styled.div<TableCellProps>`
  user-select: none;
  border-collapse: collapse;
  :nth-child(2) {
-    border-left: 2px solid rgb(242, 243, 245);
+    border-left: 1px solid rgb(235, 235, 235);
  }
  font-weight: bold;
 `;

 export const Scheduler = () => {
-
  const cellRef = useRef<HTMLDivElement>(null);
  const [cellWidth, setCellWidth] = useState(0);
  const [cellHeight, setCellHeight] = useState(0);
@ -80,52 +79,52 @@ export const Scheduler = () => {
  }, []);

  return (
-      <SchedulerWrapper>
-        <TableHead>
-          {days.map((day, indexCell) =>
-            indexCell === 0 ? (
-              <TableCell isHourColumn={true} key={indexCell}>
-                {day}
-              </TableCell>
-            ) : (
-              <TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
-                {day}
-              </TableCell>
-            ),
-          )}
-        </TableHead>
-        <TableBody>
-          {hours.map((hour, indexRow) => (
-            <TableRow key={indexRow}>
-              {[hour, '', '', '', '', ''].map((value, indexCell) =>
-                indexCell === 0 ? (
-                  <TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
-                    {value}
-                  </TableCell>
-                ) : indexRow === 0 && indexCell === 1 ? (
-                  <TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
-                    {value}
-                  </TableCell>
-                ) : indexRow === 23 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
-                    {value}
-                  </TableCell>
-                ) : indexRow === 5 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
-                    {value}
-                  </TableCell>
-                ) : indexRow % 2 !== 0 ? (
-                  <TableCell style={{ borderBottom: '2px solid  rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
-                    {value}
-                  </TableCell>
-                ) : (
-                  <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
-                ),
-              )}
-            </TableRow>
-          ))}
-          <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
-        </TableBody>
-      </SchedulerWrapper>
+    <SchedulerWrapper>
+      <TableHead>
+        {days.map((day, indexCell) =>
+          indexCell === 0 ? (
+            <TableCell isHourColumn={true} key={indexCell}>
+              {day}
+            </TableCell>
+          ) : (
+            <TableCell style={{ borderStyle: 'none none solid none' }} key={indexCell}>
+              {day}
+            </TableCell>
+          ),
+        )}
+      </TableHead>
+      <TableBody>
+        {hours.map((hour, indexRow) => (
+          <TableRow key={indexRow}>
+            {[hour, '', '', '', '', ''].map((value, indexCell) =>
+              indexCell === 0 ? (
+                <TableCell isHourColumn={true} cellHeight={cellHeight} key={`${indexRow}${indexCell}`}>
+                  {value}
+                </TableCell>
+              ) : indexRow === 0 && indexCell === 1 ? (
+                <TableCell ref={cellRef} key={`${indexRow}${indexCell}`}>
+                  {value}
+                </TableCell>
+              ) : indexRow === 23 ? (
+                <TableCell style={{ borderBottom: '1px solid   rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
+                  {value}
+                </TableCell>
+              ) : indexRow === 5 ? (
+                <TableCell style={{ borderBottom: '1px solid  rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
+                  {value}
+                </TableCell>
+              ) : indexRow % 2 !== 0 ? (
+                <TableCell style={{ borderBottom: '1px solid  rgb(235, 235, 235)' }} key={`${indexRow}${indexCell}`}>
+                  {value}
+                </TableCell>
+              ) : (
+                <TableCell key={`${indexRow}${indexCell}`}>{value}</TableCell>
+              ),
+            )}
+          </TableRow>
+        ))}
+        <SchedulerEvents cellWidth={cellWidth} cellHeight={cellHeight} />
+      </TableBody>
+    </SchedulerWrapper>
  );
 };
--- a/src/components/SchedulerRow.tsx
+++ b/src/components/SchedulerRow.tsx
@ -1,6 +1,6 @@
 import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react';
 import { GroupType, SchedulerEvent } from '../types';
-import styled from 'styled-components/macro';
+import styled, { css } from 'styled-components/macro';
 import Popover from '@material-ui/core/Popover';
 import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
 import { MONDAY_TO_FRIDAY } from '../constants';
@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
 );

 const PopoverSpan = styled.span`
-  font-weight: 'bold';
+  font-weight: bold;
  margin-right: 2px;
 `;

@ -67,7 +67,7 @@ const StyledSchedulerEvent = styled.div<SchedulerEventProps>`
 `;

 const threeStyles = () => {
-  return `
+  return css`
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 70px;`;
@ -121,7 +121,6 @@ const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
 export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
  const classes = useStyles();
  const groupsPerDay = getGroupsPerDay(groups);
-  console.log('groups: ', groups);
  const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
  const [popoverId, setPopoverId] = useState<string | null>(null);
  //looks weird
@ -202,16 +201,16 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                        <PopoverSpan>Prowadzący:</PopoverSpan> {groups[index].lecturer}
                      </p>
                      <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Sala zajęć</span>: {groups[index].room}
+                        <PopoverSpan>Sala zajęć</PopoverSpan>: {groups[index].room}
                      </p>
                      <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod przedmiotu: </span>ACB129
+                        <PopoverSpan>Kod przedmiotu: </PopoverSpan>ACB129
                      </p>
                      <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Kod grupy: </span>FVJ753
+                        <PopoverSpan>Kod grupy: </PopoverSpan>FVJ753
                      </p>
                      <p style={{ margin: '2px 0 2px 0' }}>
-                        <span style={{ fontWeight: 'bold', marginRight: '2px' }}>Punkty ECTS:</span> 2
+                        <PopoverSpan>Punkty ECTS:</PopoverSpan> 2
                      </p>
                    </div>
                  </Popover>
--- a/src/contexts/CoursesProvider.tsx
+++ b/src/contexts/CoursesProvider.tsx
@ -134,11 +134,11 @@ export const CoursesProvider = ({ children }: CoursesProviderProps) => {

  const fetchCourses = async () => {
    try {
-      console.log('env is: ', process.env.REACT_APP_API_URL);
      const { data: courses } = await axiosInstance.get<Array<Course>>(
        `${process.env.REACT_APP_API_URL}/api/v1/courses/getCoursesWithGroups`,
      );
      const sortedCourses = courses.sort((a, b) => (a.name > b.name ? 1 : -1));
+      console.log('courses: ', courses);
      setCourses(sortedCourses);
    } catch (e) {
      console.log(e);