jayendrasharan · ribhu0405 · May 28, 2020 · May 29, 2020 · May 29, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.package-lock.json
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@microsoft/sp-office-ui-fabric-core": "^1.10.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "@types/jest": "^24.9.1",
+    "@types/node": "^12.12.42",
+    "@types/react": "^16.9.35",
+    "@types/react-datepicker": "^2.11.0",
+    "@types/react-dom": "^16.9.8",
+    "@uifabric/icons": "^7.3.47",
+    "node-sass": "^4.14.1",
+    "office-ui-fabric-react": "^7.116.1",
+    "react": "^16.13.1",
+    "react-datepicker": "^2.16.0",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "typescript": "^3.7.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+  <title>Todo App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,22 @@
+@import './../node_modules/office-ui-fabric-react/dist/sass/_References.scss';
+// @import './../node_modules/office-ui-fabric-core/dist/css/fabric.min.css';
+@import './../node_modules/office-ui-fabric-react/dist/sass/Fabric.scss';
+
+
+.row {
+  @include ms-Grid-row;
+  @include ms-fontColor-black;
+  // background-color: $ms-color-themeDark;
+  // padding: 20px;
+}
+
+.column {
+  @include ms-Grid-col;
+  @include ms-lg6;
+  @include ms-xl6;
+}
+
+.App {
+  // text-align: center;
+  // background: #61dafb;
+}
diff --git a/src/ITodo.ts b/src/ITodo.ts
@@ -0,0 +1,9 @@
+export interface ITask {
+    id: number;
+    currentState: string,
+    title: string;
+    description: string;
+    createdAt: Date;
+    dueDate: Date;
+    priority: string;
+}
diff --git a/src/Tasks.tsx b/src/Tasks.tsx
@@ -0,0 +1,182 @@
+import React, { Component } from 'react'
+import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import DatePicker from "react-datepicker";
+import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react/lib/ChoiceGroup';
+import { Spinner } from 'office-ui-fabric-react/lib/Spinner';
+import { Label } from 'office-ui-fabric-react/lib/Label';
+import "react-datepicker/dist/react-datepicker.css";
+import { ITask } from './ITodo';
+import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
+
+const options: IChoiceGroupOption[] = [
+    { key: 'None', text: 'None' },
+    { key: 'low', text: 'low' },
+    { key: 'medium', text: 'medium' },
+    { key: 'high', text: 'high' },
+];
+export default class Tasks extends Component<any, any> {
+
+    constructor(props: any) {
+        super(props);
+        let curretDate: Date = new Date();
+        this.state = {
+            loading: false,
+            task: {
+                id: curretDate.getTime(),
+                currentState: "",
+                title: "",
+                description: "",
+                createdAt: curretDate,
+                dueDate: null,
+                priority: "None",
+            } as ITask
+        }
+    }
+
+    public componentWillReceiveProps(nexProps: any) {
+        let task: ITask = null;
+        let curretDate: Date = new Date();
+        if (!nexProps.selectedTask) {
+            task = {
+                id: curretDate.getTime(),
+                currentState: "",
+                title: "",
+                description: "",
+                createdAt: curretDate,
+                dueDate: null,
+                priority: "None",
+            };
+        }
+        else {
+            task = nexProps.selectedTask;
+        }
+        this.setState({
+            task
+        });
+    }
+
+
+
+    render(): JSX.Element {
+
+        let { task, loading } = this.state;
+
+        return (
+            <Panel
+                isOpen={this.props.isOpenTaskPanel}
+                onDismiss={() => this.props.closeTaskPanel()}
+                type={PanelType.custom}
+                customWidth='888px'
+                closeButtonAriaLabel="Close"
+                headerText="Task">
+                {
+                    loading ?
+                        <React.Fragment>
+                            <Spinner label="Saving task..." ariaLive="assertive" labelPosition="top" />
+                        </React.Fragment>
+                        :
+                        <div className="ms-Grid" dir="ltr">
+                            <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12" >
+                                <div className="row">
+
+                                    <TextField
+                                        label="Summary"
+                                        value={task.title}
+                                        onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+                                            let tempTask: ITask = { ...task };
+                                            tempTask.title = !newValue ? "" : newValue;
+                                            this.setState({
+                                                task: tempTask
+                                            });
+                                        }
+                                        }
+                                        required
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="row">
+                                <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg12" >
+                                    <TextField
+                                        label="Description"
+                                        value={task.description}
+                                        multiline
+                                        onChange={(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
+                                            let tempTask: ITask = { ...task };
+                                            tempTask.description = !newValue ? "" : newValue;
+                                            this.setState({
+                                                task: tempTask
+                                            });
+                                        }
+                                        }
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="row">
+                                <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg6" >
+                                    <ChoiceGroup
+                                        selectedKey={task.priority}
+                                        options={options}
+                                        onChange={(ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => {
+
+                                            let tempTask: ITask = { ...task };
+                                            tempTask.priority = !option ? "" : option.key;
+                                            this.setState({
+                                                task: tempTask
+                                            });
+                                        }}
+                                        label="Priority:"
+                                    />
+                                </div>
+                                <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg6" >
+                                    <Label>Due Date: *</Label>
+                                    <DatePicker
+                                        selected={task.dueDate}
+                                        value={task.dueDate ? task.dueDate.toLocaleDateString() : null}
+                                        onChange={(date: Date) => {
+                                            let tempTask: ITask = { ...task };
+                                            tempTask.dueDate = date;
+                                            this.setState({
+                                                task: tempTask
+                                            });
+                                        }}
+                                    />
+                                </div>
+                            </div>
+
+                            <div className="row">
+                                <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg9">
+                                </div>
+                                <div className="ms-Grid-col ms-sm12 ms-md12 ms-lg9">
+                                    <PrimaryButton
+                                        disabled={
+                                            !task.dueDate ||
+                                            !task.title
+                                        }
+                                        text="Save task"
+                                        menuIconProps={{ iconName: "Add" }}
+                                        onClick={() => {
+                                            this.setState({
+                                                loading: true
+                                            }, () => {
+                                                setTimeout(() => {
+                                                    this.setState({
+                                                        loading: false
+                                                    }, () => this.props.saveTask(task));
+                                                }, 2500)
+                                            })
+
+                                        }
+                                        }
+                                    />
+                                </div>
+                            </div>
+
+                        </div>
+                }
+            </Panel >
+        )
+    }
+}