add session view details

WBG-Coach · Aug 2, 2023 · 8ff6aa8 · 8ff6aa8
1 parent 43df384
commit 8ff6aa8
Show file tree

Hide file tree

Showing 8 changed files with 1,329 additions and 1,287 deletions.
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/pages/Coaches/index.tsx b/src/pages/Coaches/index.tsx
@@ -5,8 +5,6 @@ import {
   Box,
   Button,
   Center,
-  Flex,
-  Heading,
   Modal,
   ModalBody,
   ModalCloseButton,

diff --git a/src/pages/Sessions/SessionForm/index.tsx b/src/pages/Sessions/SessionForm/index.tsx
diff --git a/src/pages/Sessions/SessionList/index.tsx b/src/pages/Sessions/SessionList/index.tsx
@@ -1,19 +1,28 @@
-import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
+import {
+  Box,
+  Flex,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Tag,
+  Text,
+} from "@chakra-ui/react";
 import { EditIcon, DeleteIcon } from "@chakra-ui/icons";
 import { ISession } from "@/types";
 import Table from "@/components/Table";
+import Icon from "@/components/Base/Icon";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   sessions: ISession[];
-  handleEdit: (session: ISession) => void;
-  handleDelete: (session: ISession) => void;
+  handleOpen: (session: ISession) => void;
 };
 
-const SessionList: React.FC<Props> = ({
-  sessions,
-  handleDelete,
-  handleEdit,
-}) => {
+const SessionList: React.FC<Props> = ({ sessions, handleOpen }) => {
+  const { t } = useTranslation();
+
   return (
     <Table
       data={sessions}
@@ -34,6 +43,43 @@ const SessionList: React.FC<Props> = ({
           renderColumn: (item: ISession) => item.subject,
           title: "Subject",
         },
+
+        {
+          renderColumn: (item: ISession) =>
+            item.feedbacks.length > 0 ? (
+              <Tag color="green.700" bg="green.100">
+                Complete
+              </Tag>
+            ) : (
+              <Tag color="red.700" bg="red.100">
+                Incomplete
+              </Tag>
+            ),
+          title: "Feedback",
+        },
+        {
+          renderColumn: (item: ISession) => (
+            <Flex justifyContent="center">
+              <Menu>
+                <MenuButton p="8px">
+                  <Icon name="ellipsis-v" size={16} />
+                </MenuButton>
+                <MenuList>
+                  <MenuItem
+                    gap="8px"
+                    alignItems="center"
+                    onClick={() => handleOpen(item)}
+                  >
+                    <Icon name="eye" />
+                    {t("common.view")}
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </Flex>
+          ),
+          width: "85px",
+          title: "common.actions",
+        },
       ]}
     />
   );

diff --git a/src/pages/Sessions/SessionView/index.tsx b/src/pages/Sessions/SessionView/index.tsx
@@ -0,0 +1,119 @@
+import Icon from "@/components/Base/Icon";
+import { IAnswer, ICompetence, ISession } from "@/types";
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+  DrawerBody,
+  HStack,
+  Text,
+  VStack,
+  Divider,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+
+type Props = {
+  session?: ISession;
+  onClose: () => void;
+};
+
+const SessionView: React.FC<Props> = ({ session, onClose }) => {
+  const [competencies, setCompetencies] = useState<ICompetence[]>([]);
+
+  useEffect(() => {
+    if (session) {
+      setCompetencies(
+        session.answers
+          .reduce((acc: ICompetence[], item: IAnswer) => {
+            const competence = acc.find(
+              (competence) => competence.id === item.question.competence_id
+            );
+            if (competence) {
+              competence.answers?.push(item);
+              return acc;
+            } else {
+              return [
+                ...acc,
+                { ...(item.question.competence as any), answers: [item] },
+              ];
+            }
+          }, [] as ICompetence[])
+          .reverse()
+      );
+    } else {
+      setCompetencies([]);
+    }
+  }, [session]);
+
+  return (
+    <Drawer isOpen={!!session} placement="right" onClose={onClose} size="md">
+      <DrawerOverlay />
+      <DrawerContent roundedLeft={14}>
+        <DrawerCloseButton mt={2} color="Primary.$200" />
+        <DrawerHeader>{"View session"}</DrawerHeader>
+
+        <DrawerBody>
+          <HStack mb="4px" alignItems="center">
+            <Icon name="university" size={20} />
+            <Text fontWeight="semibold">School</Text>
+          </HStack>
+          <Text>{session?.school.name}</Text>
+          <Divider my="8px" />
+
+          <HStack mb="4px" alignItems="center">
+            <Icon name="user-alt" size={20} />
+            <Text fontWeight="semibold">Coach</Text>
+          </HStack>
+          <Text>{session?.coach.name}</Text>
+          <Divider my="8px" />
+
+          <HStack mb="4px" alignItems="center">
+            <Icon name="graduation-cap" size={20} />
+            <Text fontWeight="semibold">Teacher</Text>
+          </HStack>
+          <Text>{session?.teacher.name}</Text>
+          <Divider my="8px" />
+
+          {session?.feedbacks[0] && (
+            <VStack w="100%" mb="20px" py="16px" borderBottom="1px solid #eee">
+              <Text w="100%" mb="16px" fontSize={20} fontWeight="semibold">
+                Feedback annotation
+              </Text>
+              <Text w="100%">{session?.feedbacks[0].value}</Text>
+            </VStack>
+          )}
+          {competencies.map((competence, index) => (
+            <div>
+              <Text fontSize={20} fontWeight="semibold">
+                {index + 1}
+                {". "}
+                {competence.title}
+              </Text>
+              {competence.answers?.map((answer) => (
+                <div>
+                  <p>{answer.question.title}</p>
+                  <Text fontSize="12px" mb="8px">
+                    {answer.question.description}
+                  </Text>
+                  <HStack mb="16px">
+                    {[1, 2, 3, 4, 5].map((value) =>
+                      value <= answer.value ? (
+                        <Icon name="star-solid" color="#E89F0C" />
+                      ) : (
+                        <Icon name="star-solid" color="#C7CBD1" />
+                      )
+                    )}
+                  </HStack>
+                </div>
+              ))}
+            </div>
+          ))}
+        </DrawerBody>
+      </DrawerContent>
+    </Drawer>
+  );
+};
+
+export default SessionView;