From 7cb23c6cc84154205b3880e06555f2923371b11f Mon Sep 17 00:00:00 2001
From: michal <mychalze@gmail.com>
Date: Wed, 15 Jan 2020 21:57:51 +0100
Subject: [PATCH] Added notes

---
 src/App.js       |  59 +++++----
 src/Notes.js     | 304 +++++++++++++++++++++++++++++++++++++++++++++++
 src/userPanel.js |  52 +++++++-
 3 files changed, 386 insertions(+), 29 deletions(-)
 create mode 100644 src/Notes.js

diff --git a/src/App.js b/src/App.js
index 019a35a..f8ffe1e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,15 +6,20 @@ import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 
+
+
 import { UserPanel, Login } from './userPanel.js';
 import { Transactions } from './Transactions.js';
 import Contacts from './Contacts.js';
 import Supervisors from './Supervisors.js';
+import Notes from './Notes.js';
+
 
 const menu = { // index of menu items
     TRANSACTIONS: 0,
     CONTACTS: 1,
     SUPERVISORS: 2,
+    NOTES: 3,
 }
 
 class App extends React.Component {
@@ -37,8 +42,8 @@ class App extends React.Component {
     componentDidMount() {
 
         // const onValueChanged = this.onValueChanged;
-        let request= new XMLHttpRequest();
-        request.onreadystatechange = function() {
+        let request = new XMLHttpRequest();
+        request.onreadystatechange = function () {
             if (this.readyState === 4 && this.status === 200) {
                 console.log("RETURNED:", this.responseText);
                 // const supervisors = JSON.parse(this.responseText);
@@ -51,37 +56,43 @@ class App extends React.Component {
     }
 
     render() {
-        const { loggedUser, page} = this.state;
+        const { loggedUser, page } = this.state;
 
         console.log(this.state);
+        //console.log("habadub");
         return (
             <div className="App">
                 {!loggedUser ? <Login id="login" appOnValueChanged={this.onValueChanged} />
-                : <>
-                    <div>
-                        <AppBar position="static">
-                            <Tabs aria-label="menu"
-                                onChange={(event, value) => this.onValueChanged("page", value)}
-                                value={page}
-                            >
-                                <Tab label={<span className="my-button">Transactions</span>} />
-                                <Tab label={<span className="my-button">Contacts</span>} />
-                                <Tab label={<span className="my-button">Supervisors</span>} />
-                            </Tabs>
-                        </AppBar>
-                        <UserPanel appOnValueChanged={this.onValueChanged} loggedUser={loggedUser} />
-                    </div>
-                    <header className="App-page">
-                        <div className="App-content">
-                            { page === menu.TRANSACTIONS && <Transactions transactions={loggedUser.transactions} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} /> }
-                            { page === menu.CONTACTS && <Contacts contacts={loggedUser.contacts} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} /> }
-                            { page === menu.SUPERVISORS && <Supervisors supervisors={loggedUser.supervisors} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} /> }
+                    : <>
+                        <div>
+                            <AppBar position="static">
+                                <Tabs aria-label="menu"
+                                    onChange={(event, value) => this.onValueChanged("page", value)}
+                                    value={page}
+                                >
+                                    <Tab label={<span className="my-button">Transactions</span>} />
+                                    <Tab label={<span className="my-button">Contacts</span>} />
+                                    <Tab label={<span className="my-button">Supervisors</span>} />
+                                    <Tab label={<span className="my-button">Notes</span>} />
+                                </Tabs>
+                            </AppBar>
+
+                            <UserPanel appOnValueChanged={this.onValueChanged} loggedUser={loggedUser} />
                         </div>
-                    </header>
-                </>}
+                        <header className="App-page">
+
+                            <div className="App-content">
+                                {page === menu.TRANSACTIONS && <Transactions transactions={loggedUser.transactions} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} />}
+                                {page === menu.CONTACTS && <Contacts contacts={loggedUser.contacts} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} />}
+                                {page === menu.SUPERVISORS && <Supervisors supervisors={loggedUser.supervisors} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} />}
+                                {page === menu.NOTES && <Notes notes={loggedUser.notes} loggedUser={loggedUser} appOnValueChanged={this.onValueChanged} />}
+                            </div>
+                        </header>
+                    </>}
             </div>
         );
     }
 }
 
 export default App;
+
diff --git a/src/Notes.js b/src/Notes.js
new file mode 100644
index 0000000..c2f8ab3
--- /dev/null
+++ b/src/Notes.js
@@ -0,0 +1,304 @@
+// Author: Michal Zelenak, xzelen24
+
+import React from 'react';
+import ExpansionPanel from '@material-ui/core/ExpansionPanel';
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
+import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Box from '@material-ui/core/Box';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import TextField from '@material-ui/core/TextField';
+import Grid from '@material-ui/core/Grid';
+
+
+import './styles.css';
+
+class DeleteNote extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showModal: false,
+        };
+
+        this.open = this.open.bind(this);
+        this.close = this.close.bind(this);
+        this.onValueChanged = this.onValueChanged.bind(this);
+        this.delete = this.delete.bind(this);
+    }
+
+    onValueChanged(key, value) {
+        this.setState({ [key]: value });
+    }
+
+    close() {
+        this.setState({ showModal: false, dialogError: undefined });
+    }
+
+    open() {
+        this.setState({ showModal: true });
+    }
+
+    delete() {
+        const loggedUser = this.props.loggedUser;
+        const appOnValueChanged = this.props.appOnValueChanged;
+
+        const data = { date: this.props.note.date, createDate: this.props.note.createDate, note: this.props.note.note, shortNote: this.props.note.shortNote };
+        const call = {
+            action: "deleteContact",
+            arguments: data
+        };
+        //        const callStr = JSON.stringify(call);
+        //       console.log("Delete Contact API:", callStr);
+
+        const newNotes = [...loggedUser.notes];
+
+        var finded = 0;
+        var index = 0;
+
+        for (const result of newNotes) { if (result.note === data.note) { finded = index } else { index = index + 1 } };
+
+        newNotes.splice(finded, 1);
+        console.log(finded);
+        loggedUser.notes = newNotes;
+        appOnValueChanged("loggedUser", loggedUser);
+        this.close();
+    }
+
+    render() {
+        const id = this.props.note + "-delete";
+        return (
+            <>
+                <Button onClick={this.open} variant="contained" color="secondary"><span className="my-button">Delete</span></Button>
+                <Dialog open={this.state.showModal}
+                    onClose={this.close}
+                    aria-labelledby={id + "-modal"}
+                    maxWidth={'sm'}
+                    fullWidth
+                >
+                    <DialogTitle id={id + "-modal-title"}>Delete Note</DialogTitle>
+                    <DialogContent>
+                        Delete this Note?
+                        <span style={{ color: "red" }}>
+                            {this.state.errorMessage && (<br />)}
+                            {this.state.errorMessage}
+                        </span>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button id={id + "-action-close"} onClick={this.close} color="default">
+                            <span className="my-button">
+                                Close
+                            </span>
+                        </Button>
+                        <Button id={id + "-action-delete"} onClick={this.delete} color="secondary">
+                            <span className="my-button">
+                                Delete
+                            </span>
+                        </Button>
+
+
+                    </DialogActions>
+                </Dialog>
+            </>
+        );
+    }
+}
+
+class CreateNote extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            showModal: false,
+            date: "",
+            createDate: "",
+            shortNote: "",
+            note: "",
+        };
+
+        this.open = this.open.bind(this);
+        this.close = this.close.bind(this);
+        this.onValueChanged = this.onValueChanged.bind(this);
+        this.create = this.create.bind(this);
+    }
+
+    onValueChanged(key, value) {
+        this.setState({ [key]: value });
+    }
+
+    close() {
+        this.setState({ showModal: false, date: "", shortNote: "", note: "", dialogError: undefined });
+    }
+
+    open() {
+        this.setState({ showModal: true });
+    }
+
+    create() {
+        const loggedUser = this.props.loggedUser;
+        const appOnValueChanged = this.props.appOnValueChanged;
+
+        const { date, createDate, shortNote, note } = this.state;
+        const data = { date, createDate, shortNote, note };
+        const call = {
+            action: "createNote",
+            arguments: data
+        };
+        const callStr = JSON.stringify(call);
+        console.log("CreateNote", callStr);
+
+        const newNotes = [...loggedUser.notes];
+        newNotes.push({
+            date,
+            createDate,
+            shortNote,
+            note
+
+        });
+        loggedUser.notes = newNotes;
+        appOnValueChanged("loggedUser", loggedUser);
+        this.close();
+    }
+
+    render() {
+        const id = "create";
+        return (
+            <>
+                <Button onClick={this.open} variant="contained" color="primary"><span className="my-button">Create new Note</span></Button>
+                <Dialog open={this.state.showModal}
+                    onClose={this.close}
+                    aria-labelledby={id + "-modal"}
+                    maxWidth={'sm'}
+                    fullWidth
+                >
+                    <DialogTitle id={id + "-modal-title"}>Create New Note</DialogTitle>
+                    <DialogContent>
+                        <Box m={1} component="span" display="block">
+                            <TextField id={id + "-shortNote"}
+                                label="Short Note about full note"
+                                value={this.state.shortNote}
+                                onChange={e => this.onValueChanged("shortNote", e.target.value)}
+                                fullWidth
+                            />
+                        </Box>
+                        <Box m={1} component="span" display="block">
+                            <TextField id={id + "-note"}
+                                label="Note"
+                                value={this.state.note}
+                                onChange={e => this.onValueChanged("note", e.target.value)}
+                                fullWidth
+                            />
+                        </Box>
+                        <Box m={1} component="span" display="block">
+                            <TextField id={id + "-date"}
+                                label="Date"
+                                value={this.state.date}
+                                onChange={e => this.onValueChanged("date", e.target.value)}
+                                fullWidth
+                            />
+                        </Box>
+
+                        <span style={{ color: "red" }}>
+                            {this.state.errorMessage && (<br />)}
+                            {this.state.errorMessage}
+                        </span>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button id={id + "-action-close"} onClick={this.close} color="default">
+                            <span className="my-button">
+                                Close - don't save
+                            </span>
+                        </Button>
+                        <Button id={id + "-action-create"} onClick={this.create} color="primary">
+                            <span className="my-button">
+                                Save
+                            </span>
+                        </Button>
+                    </DialogActions>
+                </Dialog>
+            </>
+        );
+    }
+}
+
+export default class Notes extends React.Component {
+    constructor(props) {
+        super(props);
+        console.log("this.state");
+        this.onValueChanged = this.onValueChanged.bind(this);
+    }
+
+    onValueChanged(key, value) {
+        this.setState({ [key]: value });
+    }
+
+    render() {
+        const day = new Date().getDate();
+        const month = new Date().getMonth() + 1;
+        const year = new Date().getFullYear();
+        const date = day + "-" + month + "-" + year;
+        console.log(date);
+        //  console.log("sdaf");
+        const NotesPanel = (note) => {
+            return (
+                <ExpansionPanel key={note.shortNote}>
+                    <ExpansionPanelSummary
+                        expandIcon={<ExpandMoreIcon />}
+                        aria-controls="panel1c-content"
+                        id="panel1c-header"
+                        classes={{ layout: "grid", gridTemplateColumns: "100px 100px 100px" }}
+                    >
+                        <span style={{ width: "15.1em", marginLeft: "1em" }}>{note.shortNote}</span>
+                        <span style={note.date === date ? { marginLeft: "20em", color: "red" } : { marginLeft: "20em" }}>{"Date:  "}</span>
+                        <span style={note.date === date ? { marginLeft: "0.3em", color: "red" } : { marginLeft: "0.3em" }}>{note.date}</span>
+
+
+                    </ExpansionPanelSummary>
+                    <ExpansionPanelDetails>
+                        <table id="my-table">
+                            <tbody>
+                                <tr>
+                                    <th></th>
+                                </tr>
+                                <tr>
+                                    <td><b>CreateDate:</b> {note.createDate}</td>
+                                    <td><b>Note:</b> {note.note}</td>
+
+                                </tr>
+                            </tbody>
+                        </table>
+                    </ExpansionPanelDetails>
+                    <ExpansionPanelActions>
+                        <DeleteNote note={note} loggedUser={this.props.loggedUser} appOnValueChanged={this.props.appOnValueChanged} />
+
+                    </ExpansionPanelActions>
+                </ExpansionPanel >
+            );
+        };
+
+        const body = this.props.notes.map(note => NotesPanel(note));
+        //console.log("sdaf");
+        return (
+            <Grid container spacing={3} >
+                {
+                    this.props.loggedUser &&
+                    <Grid item xs={12}>
+                        <Box display="flex" css={{ float: "right" }}>
+                            <CreateNote loggedUser={this.props.loggedUser} appOnValueChanged={this.props.appOnValueChanged} />
+                        </Box>
+                    </Grid>
+                }
+                < Grid item xs={12} >
+                    {body}
+
+                </Grid>
+            </Grid >
+        );
+    };
+}
+
diff --git a/src/userPanel.js b/src/userPanel.js
index 786b735..ba24425 100644
--- a/src/userPanel.js
+++ b/src/userPanel.js
@@ -7,6 +7,8 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import TextField from '@material-ui/core/TextField';
+//import Card from '@material-ui/core/Card';
+
 
 class Logout extends React.Component {
     constructor(props) {
@@ -48,6 +50,12 @@ class Logout extends React.Component {
                         Logout
                     </span>
                 </Button>
+
+
+
+
+
+
                 <Dialog open={this.state.showModal}
                     onClose={this.close}
                     aria-labelledby={id + "-dialog"}
@@ -81,8 +89,8 @@ export class Login extends React.Component {
         super(props);
 
         this.state = {
-            email: "",
-            password: ""
+            email: "m@m.com",//changed
+            password: "123"//changed
         };
 
         this.onValueChanged = this.onValueChanged.bind(this);
@@ -105,7 +113,7 @@ export class Login extends React.Component {
         const callStr = JSON.stringify(call); */
         // TODO replace dummy data with backend
 
-        if (data.email === "simon.kobyda@gmail.com" && password === "123456789") {
+        if (data.email === "m@m.com" && password === "123") {
             const loggedUser = {
                 name: "Simon Kobyda",
                 iban: "SK02602020000000008342",
@@ -181,6 +189,38 @@ export class Login extends React.Component {
                         mail: "whatevermail@gmail.com",
                         phoneNumber: "+420854398148"
                     },
+                ],
+                notes: [
+                    {
+                        date: "15-1-2020",
+                        createDate: "25-11-2019",
+                        shortNote: "Charita prispevok",
+                        note: "Prispiet na charitu pre obete snp, zbierka vyhlasena kostolom"
+
+                    },
+                    {
+                        date: "1-2-2020",
+                        createDate: "26-10-2018",
+                        shortNote: "Syn narodeniny",
+                        note: "Poslat peniaze k narodeninam syna Mateja"
+
+                    },
+                    {
+                        date: "10-2-2020",
+                        createDate: "26-11-2019",
+                        shortNote: "Chladnicka splatky",
+                        note: "Zaplatit prvu splatku za novu chladnicku kupenu v nay elektro"
+
+                    },
+
+                    {
+                        date: "20-2-2020",
+                        createDate: "20-12-2019",
+                        shortNote: "Vnuk skusky",
+                        note: "Poslat peniaze vnukovi za spravene skusky podla vysledkov"
+
+                    },
+
                 ]
             };
 
@@ -217,8 +257,8 @@ export class Login extends React.Component {
                         />
                     </Box>
                     <span style={{ color: "red" }}>
-                        { this.state.errorMessage && (<br />) }
-                        { this.state.errorMessage }
+                        {this.state.errorMessage && (<br />)}
+                        {this.state.errorMessage}
                     </span>
                 </DialogContent>
                 <DialogActions>
@@ -238,7 +278,9 @@ export const UserPanel = ({ appOnValueChanged, loggedUser }) => {
 
     return (
         <Box display="flex" m={1} p={1} bgcolor="background.paper" css={{ float: "right" }}>
+
             <Logout id={id} appOnValueChanged={appOnValueChanged} />
         </Box>
     );
 }
+