Story/form insight (#24)

* form insight structure

* clickable steps

* add survey context

* functional survey form

* submit form to backend

* add input textarea for comments

* only menarik

* add validation

* check whether is submitted

* add survey to dashboard

* add interfak to event

* set completed true

* add deadline

* edit comments

* edit survey page

src/components/Survey/Article.tsx

@@ -0,0 +1,26 @@
+import { Radio, RadioChangeEvent, Space } from "antd";
+
+interface Props {
+  data: Record<string, any>
+  setData: (args: Record<string, any>) =>  void
+}
+
+export const Article = ({data, setData}: Props) => {
+
+  const onChange = (e: RadioChangeEvent, key: string) => {
+    setData({...data, [key]: e.target.value});
+  };
+
+  return (
+    <div className="py-10">
+      <h1>Menurutmu, artikel OSKM apa yang paling menarik?</h1>
+      <Radio.Group className="my-5" onChange={(e) => onChange(e, "menarik")} value={data["menarik"]}>
+        <Space direction="vertical">
+          <Radio value={1}>Option A</Radio>
+          <Radio value={2}>Option B</Radio>
+          <Radio value={3}>Option C</Radio>
+        </Space>
+      </Radio.Group>
+    </div>
+  )
+}

src/components/Survey/Assignment.tsx

@@ -0,0 +1,34 @@
+import { Radio, RadioChangeEvent, Space } from "antd";
+
+interface Props {
+  data: Record<string, any>
+  setData: (args: Record<string, any>) =>  void
+}
+
+const assignments = [
+  'Daily Quest #1',
+  'Daily Quest #2',
+  'Daily Quest #3',
+  'Daily Quest #4',
+]
+
+
+export const Assignment = ({data, setData}: Props) => {
+
+  const onChange = (e: RadioChangeEvent, key: string) => {
+    setData({...data, [key]: e.target.value})
+  }
+
+  return (
+    <div className="py-10">
+      <h1>Menurutmu, tugas day berapa yang paling menarik?</h1>
+      <Radio.Group className="my-5" onChange={(e) => onChange(e, "menarik")} value={data["menarik"]}>
+        <Space direction="vertical">
+          {assignments.map((event, index) => (
+            <Radio value={event} key={index}>{event}</Radio>
+          ))}
+        </Space>
+      </Radio.Group>
+    </div>
+  )
+}

src/components/Survey/Event.tsx

@@ -0,0 +1,36 @@
+import { Radio, RadioChangeEvent, Space } from "antd"
+
+interface Props {
+  data: Record<string, any>
+  setData: (args: Record<string, any>) =>  void
+}
+
+const events = [
+  'Talkshow "Tantangan Masa Kini"',
+  'Treasure Hunt',
+  'Talkshow "KM ITB"',
+  'Mentoring',
+  'Forum Lapangan',
+  'Interaksi Fakultas',
+  'Webinar "Kontribusi Membangun Indonesia"',
+  'Main Samitra'
+]
+
+export const Event = ({data, setData}: Props) => {
+  const onChange = (e: RadioChangeEvent, key: string) => {
+    setData({...data, [key]: e.target.value})
+  }
+
+  return (
+    <div className="py-10">
+      <h1>Menurutmu, acara OSKM apa yang paling menarik?</h1>
+      <Radio.Group className="my-5" onChange={(e) => onChange(e, "menarik")} value={data["menarik"]}>
+        <Space direction="vertical">
+          {events.map((event, index) => (
+            <Radio value={event} key={index}>{event}</Radio>
+          ))}
+        </Space>
+      </Radio.Group>
+    </div>
+  )
+}

src/components/Survey/Friend.tsx

@@ -0,0 +1,96 @@
+import { Radio, Collapse, Input } from "antd";
+
+interface Props {
+  friendList: any[]
+  data: Record<string, any>
+  setData: (args: Record<string, any>) =>  void
+}
+
+export const Friend = ({data, setData, friendList}: Props) => {
+
+  const onChange = (e: any, username: string, key: string) => {
+    if (!data[username]) {
+      data[username] = {}
+    }
+
+    setData({
+      ...data, 
+      [username]: {
+        ...data[username], 
+        [key]: e.target.value
+      }
+    });
+  };
+
+  return (
+    <div
+      className="py-10"
+    >
+      <Collapse defaultActiveKey={['0']}>
+        {friendList.map((friend) => (
+          <Collapse.Panel header={friend.name} key={friend.username}>
+            <h1>Bacot - Kalem</h1>
+            <Radio.Group 
+              className="my-5" 
+              onChange={(e) => onChange(e, friend.username, "bacot_kalem")} 
+              value={data[friend.username] ? data[friend.username]["bacot_kalem"]: ""} 
+            >
+              <Radio value={"Bacot"}>Bacot</Radio>
+              <Radio value={"Kalem"}>Kalem</Radio>
+            </Radio.Group>
+
+            <h1>Serius - Bercanda</h1>
+            <Radio.Group 
+              className="my-5" 
+              onChange={(e) => onChange(e, friend.username, "serius_bercanda")} 
+              value={data[friend.username] ? data[friend.username]["serius_bercanda"]: ""} 
+            >
+              <Radio value={"Serius"}>Serius</Radio>
+              <Radio value={"Bercanda"}>Bercanda</Radio>
+            </Radio.Group>
+
+            <h1>Strict - Ngalir</h1>
+            <Radio.Group 
+              className="my-5" 
+              onChange={(e) => onChange(e, friend.username, "strict_ngalir")} 
+              value={data[friend.username] ? data[friend.username]["strict_ngalir"]: ""} 
+            >
+              <Radio value={"Strict"}>Strict</Radio>
+              <Radio value={"Ngalir"}>Ngalir</Radio>
+            </Radio.Group>
+
+            <h1>Ambis - Santuy</h1>
+            <Radio.Group 
+              className="my-5" 
+              onChange={(e) => onChange(e, friend.username, "ambis_santuy")} 
+              value={data[friend.username] ? data[friend.username]["ambis_santuy"]: ""} 
+            >
+              <Radio value={"Ambis"}>Ambis</Radio>
+              <Radio value={"Santuy"}>Santuy</Radio>
+            </Radio.Group>
+
+            <h1>Logis - Feeling</h1>
+            <Radio.Group 
+              className="my-5" 
+              onChange={(e) => onChange(e, friend.username, "logis_feeling")} 
+              value={data[friend.username] ? data[friend.username]["logis_feeling"]: ""} 
+            >
+              <Radio value={"Logis"}>Logis</Radio>
+              <Radio value={"Feeling"}>Feeling</Radio>
+            </Radio.Group>
+
+            <h1>Komentar</h1>
+            <Input.TextArea 
+              className="my-5 p-3" 
+              onChange={(e) => onChange(e, friend.username, "komentar")} 
+              value={data[friend.username] ? data[friend.username]["komentar"]: ""} 
+              maxLength={2000} 
+              showCount
+            />
+
+          </Collapse.Panel>
+        ))}
+      </Collapse> 
+    </div>  
+  )
+}

src/components/Survey/index.tsx

@@ -0,0 +1,4 @@
+export { Article } from "./Article";
+export { Assignment } from "./Assignment";
+export { Event } from "./Event";
+export { Friend } from "./Friend";

src/context/index.ts

@@ -1,5 +1,5 @@
-import React from "react";
+import { createContext } from "react";
 
-export const UserContext = React.createContext({});
+export const UserContext = createContext({});
 
-export const WorkspaceContext = React.createContext({});
+export const WorkspaceContext = createContext({});

src/layout/StandardLayout.tsx

@@ -81,14 +81,16 @@ const itemsMentor: MenuItem[] = [
     getItem(<NavTab url="../">Home</NavTab>, '0', <HomeOutlined />),
     getItem(<NavTab url="../attendance/mentor">Attendance</NavTab>, '1', <CalendarOutlined />),
     getItem(<NavTab url="../assignment/super">Assignment</NavTab>, '2', <FileTextOutlined />),
-    getItem(<NavTab url="../profile">Profile</NavTab>, '3', <ContactsOutlined />),
+    getItem(<NavTab url="../survey">Survey</NavTab>, '3', <FileTextOutlined />),
+    getItem(<NavTab url="../profile">Profile</NavTab>, '4', <ContactsOutlined />),
     getItem(<Logout />, "99", <LogoutOutlined />)
 ];
 const itemsParticipant: MenuItem[] = [
     getItem(<NavTab url="../">Home</NavTab>, '0', <HomeOutlined />),
     getItem(<NavTab url="../attendance">Attendance</NavTab>, '1', <CalendarOutlined />),
     getItem(<NavTab url="../assignment">Assignment</NavTab>, '2', <FileTextOutlined />),
-    getItem(<NavTab url="../profile">Profile</NavTab>, '3', <ContactsOutlined />),
+    getItem(<NavTab url="../survey">Survey</NavTab>, '3', <FileTextOutlined />),
+    getItem(<NavTab url="../profile">Profile</NavTab>, '4', <ContactsOutlined />),
     getItem(<Logout />, "99", <LogoutOutlined />)
 ];