Listagem de tarefas.

douglasjunior · Feb 21, 2018 · 13d6f70 · 13d6f70
1 parent 50bfbd9
commit 13d6f70
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 101 deletions.
diff --git a/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/InputForm.js b/...Integrando frontend e backend/gerenciador-de-tarefas-completo/src/components/InputForm.js
@@ -4,8 +4,8 @@ import 'rc-calendar/assets/index.css';
 import 'rc-time-picker/assets/index.css';
 import Calendar from 'rc-calendar';
 import DatePicker from 'rc-calendar/lib/Picker';
-import { Form, Input, Icon, Button } from 'antd';
 import locale from 'rc-calendar/lib/locale/pt_BR';
+import { Form, Input, Icon, Button } from 'antd';
 import moment from 'moment';
 
 const InputGroup = Input.Group;
@@ -52,39 +52,16 @@ export default class InputForm extends Component {
         this.refs.Input.blur();
     }
 
-    onFocus = () => {
-        console.log('onFocus')
-
-    }
-
-    onBlur = () => {
-        console.log('onBlur')
-    }
-
     onFocusDatePicker = () => {
-        console.log('onFocusDatePicker')
         if (this.props.autoOpen) {
             this.setState({ opened: true });
         }
     }
 
-    onBlurDatePicker = () => {
-        console.log('onBlurDatePicker')
-    }
-
     onOpenChange = (opened) => {
-        console.log('onOpenChange', opened)
         this.setState({ opened });
     }
 
-    onDateSelect = (date) => {
-        console.log('onDateSelect', date)
-        const { onDateSelect } = this.props;
-        if (onDateSelect) {
-            onDateSelect(date);
-        }
-    }
-
     openDatePicker = () => {
         this.setState({ opened: true });
     }
@@ -125,21 +102,19 @@ export default class InputForm extends Component {
                             {...others}
                             onChange={this.onChange}
                             onFocus={this.onFocusDatePicker}
-                            onBlur={this.onBlurDatePicker}
                             ref="Input" />
-                        <Button onClick={this.openDatePicker} type="primary" htmlType="button">
-                            <Icon type="calendar" style={{ color: '#fff' }} />
+                        <Button onClick={this.openDatePicker} htmlType="button">
+                            <Icon type="calendar" style={{ color: 'rgba(0,0,0,0.4)' }} />
                         </Button>
                     </InputGroup>
                     <DatePicker
                         animation="slide-up"
                         calendar={(
                             <Calendar
-                                dateInputPlaceholder="please input"
                                 formatter={dateFormat}
                                 showDateInput={false}
                                 autoFocus={false}
-                                onSelect={this.onDateSelect}
+                                onSelect={onDateSelect}
                                 locale={locale}
                             />
                         )}
@@ -158,7 +133,7 @@ export default class InputForm extends Component {
                 <Input id={id} value={value} type={type}
                     {...others}
                     onChange={this.onChange}
-                    onFocus={this.onFocus} onBlur={this.onBlur} ref="Input" />
+                    ref="Input" />
             )
         }
 

diff --git a/...ntegrando frontend e backend/gerenciador-de-tarefas-completo/src/components/TarefaItem.js b/...ntegrando frontend e backend/gerenciador-de-tarefas-completo/src/components/TarefaItem.js
diff --git a/...egrando frontend e backend/gerenciador-de-tarefas-completo/src/components/TarefasTable.js b/...egrando frontend e backend/gerenciador-de-tarefas-completo/src/components/TarefasTable.js
@@ -1,38 +1,57 @@
 import React, { Component } from 'react';
 
-import { Table, } from 'reactstrap';
+import moment from 'moment';
+import { Table, Button, Switch } from 'antd';
 
-import TarefaItem from './TarefaItem';
+const { Column } = Table;
 
 export default class TarefasTable extends Component {
 
-    renderTarefa = (tarefa, index) => {
-        return (
-            <TarefaItem key={tarefa.id} tarefa={tarefa} {...this.props} />
-        )
-    }
-
-    renderTarefas = () => {
-        const { tarefas } = this.props;
-        return tarefas.map(this.renderTarefa);
-    }
-
     render() {
+        const { onConcluidaChange, onExcluirClick, onEditarClick } = this.props;
+
         return (
-            <Table striped>
-                <thead>
-                    <tr>
-                        <th>#</th>
-                        <th>Título</th>
-                        <th>Criada em</th>
-                        <th>Concluída</th>
-                        <th>Opções</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {this.renderTarefas()}
-                </tbody>
+            <Table rowKey={tarefa => tarefa.id} dataSource={this.props.tarefas} pagination={false} >
+                <Column
+                    title='#'
+                    dataIndex='id'
+                    key='id'
+                />
+                <Column
+                    title='Título'
+                    dataIndex='titulo'
+                    key='titulo'
+                />
+                <Column
+                    title='Criado em'
+                    dataIndex='createdAt'
+                    key='createdAt'
+                    render={(text, tarefa) => (
+                        <span>
+                            {moment(tarefa.createdAt).format('DD/MM/YYYY')}
+                        </span>
+                    )}
+                />
+                <Column
+                    title='Concluída'
+                    dataIndex='concluida'
+                    key='concluida'
+                    render={(text, tarefa) => (
+                        <Switch checked={tarefa.concluida}
+                            onChange={checked => onConcluidaChange(tarefa.id, checked)} />
+                    )}
+                />
+                <Column
+                    title='Opções'
+                    key='opcoes'
+                    render={(text, tarefa) => (
+                        <Button.Group size="small">
+                            <Button type="ghost" onClick={() => onEditarClick(tarefa.id)}>Editar</Button>
+                            <Button type="danger" onClick={() => onExcluirClick(tarefa.id)}>Excluir</Button>
+                        </Button.Group>
+                    )}
+                />
             </Table>
         );
     }
-}
+}
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/layouts/SideMenu.js b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/layouts/SideMenu.js
@@ -1,6 +1,6 @@
 import React, { PureComponent, Component } from 'react';
 
-import { Layout, Menu, Icon, Divider } from 'antd';
+import { Layout, Menu, Icon } from 'antd';
 import { Route, Link, withRouter } from 'react-router-dom';
 
 import './SideMenu.css';
@@ -72,8 +72,6 @@ class SideMenu extends Component {
 
                     {menuItems}
 
-                    <Divider />
-
                     <Menu.Item >
                         <a onClick={this._logout}>
                             <Icon type="logout" />
@@ -89,4 +87,4 @@ class SideMenu extends Component {
     }
 }
 
-export default withRouter(SideMenu);
+export default withRouter(SideMenu);
diff --git a/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/pages/TarefasPage.js b/08 - Integrando frontend e backend/gerenciador-de-tarefas-completo/src/pages/TarefasPage.js
@@ -6,15 +6,15 @@ import axios from 'axios';
 //     InputGroup, Input, InputGroupAddon,
 // } from 'reactstrap';
 
-// import TarefasTable from '../components/TarefasTable';
+import TarefasTable from '../components/TarefasTable';
 // import TarefaForm from '../components/TarefaForm';
 
 export default class TarefasPage extends Component {
 
     state = { tarefas: [], showForm: false, tarefaSelecionada: null };
 
     componentDidMount() {
-        // this.getTarefas();
+        this.getTarefas();
     }
 
     getTarefas = (busca = '') => {
@@ -23,11 +23,10 @@ export default class TarefasPage extends Component {
                 titulo: busca
             }
         }).then(response => {
-            if (response.status === 200) {
-                this.setState({
-                    tarefas: response.data
-                })
-            }
+            console.log(response.data);
+            this.setState({
+                tarefas: response.data
+            })
         }).catch(ex => {
             console.error(ex, ex.response);
         })
@@ -140,14 +139,15 @@ export default class TarefasPage extends Component {
                         <Button color='success' onClick={this.onNovaTarefaClick} >Nova Tarefa</Button>
                     </NavItem>
                 </Nav>
-
+                 */}
                 <TarefasTable tarefas={tarefas}
                     onConcluidaChange={this.onConcluidaChange}
                     onExcluirClick={this.onExcluirClick}
                     onEditarClick={this.onEditarClick} />
 
+                {/*
                 <TarefaForm showForm={showForm} tarefa={tarefaSelecionada} onFecharForm={this.closeForm} onSalvarTarefa={this.onSalvarTarefa} /> */}
             </div>
         )
     }
-}
+}