SHARE
TWEET

Untitled

a guest Aug 23rd, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { Component } from "react";
  2. import Layout from '../components/MyLayout.js'
  3. import Link from 'next/link'
  4. import getApplications from "../lib/get-applications";
  5. import Router from 'next/router'
  6. import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  7. import { withAuthSync } from '../utils/auth';
  8. import moment from 'moment/min/moment-with-locales'
  9.  
  10. import {
  11.     Card, CardBody, CardHeader, Table, Button,
  12.     Form, FormGroup, Label, Input, Row, Col
  13. } from 'reactstrap';
  14.  
  15. class ApplicationsList extends Component {
  16.  
  17.     constructor(props) {
  18.         super(props)
  19.         this.state = {
  20.             cos: null,
  21.             filters: {
  22.                 participiantName: props.participiantName,
  23.                 participiantSurname: props.participiantSurname,
  24.                 city: props.city,
  25.                 email: props.email,
  26.                 phoneNumber: props.phoneNumber,
  27.             }
  28.         };
  29.     }
  30.  
  31.     static async getInitialProps(context) {
  32.  
  33.         const participiantName = (context.req && context.req.query.participiantName ? context.req.query.participiantName : '');
  34.         const participiantSurname = (context.req && context.req.query.participiantSurname ? context.req.query.participiantSurname : '');
  35.         const city = (context.req && context.req.query.city ? context.req.query.city : '');
  36.         const email = (context.req && context.req.query.email ? context.req.query.email : '');
  37.         const phoneNumber = (context.req && context.req.query.phoneNumber ? context.req.query.phoneNumber : '');
  38.  
  39.         const applications = await getApplications({participiantName, participiantSurname, city, email, phoneNumber})
  40.         console.log(`Applications data fetched. Count: ${applications.length}`)
  41.  
  42.         return {
  43.             applications: applications,
  44.             participiantName: participiantName,
  45.             participiantSurname: participiantSurname,
  46.             city: city,
  47.             email: email,
  48.             phoneNumber: phoneNumber
  49.         }
  50.     }
  51.  
  52.     handleChange = (event) => {
  53.         const { name, value } = event.target;
  54.  
  55.         this.setState({
  56.             filters: {
  57.                 ...this.state.filters,
  58.                 [name]: value
  59.             }
  60.         });
  61.     }
  62.  
  63.  
  64.     handleSubmit = (event) => {
  65.         event.preventDefault()
  66.         Router.push({
  67.             pathname: '/applications_list',
  68.             search: "?" + new URLSearchParams({
  69.                 participiantName: this.state.filters.participiantName,
  70.                 participiantSurname: this.state.filters.participiantSurname,
  71.                 city: this.state.filters.city,
  72.                 email: this.state.filters.email,
  73.                 phoneNumber: this.state.filters.phoneNumber
  74.             }).toString()
  75.         })
  76.     }
  77.  
  78.     render() {
  79.         return (
  80.             <Layout>
  81.                 <h1 className="h3 mb-2 text-gray-800">Zgłoszenia</h1>
  82.                 <Card className="shadow mb-4 mt-4">
  83.                     <CardHeader className="py-3">
  84.                         <h6 className="m-0 font-weight-bold text-primary"><FontAwesomeIcon icon="filter" className="icon-default" /> Filtrowanie listy</h6>
  85.                     </CardHeader>
  86.                     <CardBody>
  87.                         <Row>
  88.                             <Col sm="12">
  89.                                 <Form inline onSubmit={this.handleSubmit}>
  90.                                     <FormGroup className="ml-0">
  91.                                         <Label for="participiantName" className="mr-sm-2">Imię: </Label>
  92.                                         <Input onChange={this.handleChange} type="text" name="participiantName" id="participiantName" value={this.state.filters.participiantName} />
  93.                                     </FormGroup>
  94.                                     <FormGroup className="ml-2">
  95.                                         <Label for="participiantSurname" className="mr-sm-2">Nazwisko: </Label>
  96.                                         <Input onChange={this.handleChange} type="text" name="participiantSurname" id="participiantSurname" value={this.state.filters.participiantSurname} />
  97.                                     </FormGroup>
  98.                                     <FormGroup className="ml-2">
  99.                                         <Label for="city" className="mr-sm-2">Miasto: </Label>
  100.                                         <Input onChange={this.handleChange} type="text" name="city" id="city" value={this.state.filters.city} />
  101.                                     </FormGroup>
  102.  
  103.                                     <FormGroup className="ml-2">
  104.                                         <Label for="phoneNumber" className="mr-sm-2">Telefon: </Label>
  105.                                         <Input onChange={this.handleChange} type="text" name="phoneNumber" id="phoneNumber" value={this.state.filters.phoneNumber} />
  106.                                     </FormGroup>
  107.                                     <FormGroup className="ml-2">
  108.                                         <Label for="email" className="mr-sm-2">E-mail: </Label>
  109.                                         <Input onChange={this.handleChange} type="text" name="email" id="email" value={this.state.filters.email} />
  110.                                     </FormGroup>
  111.                                     <Button>Szukaj</Button>
  112.                                 </Form>
  113.                             </Col>
  114.                         </Row>
  115.                     </CardBody>
  116.                 </Card>
  117.                 <Card className="shadow mb-4 mt-4">
  118.                     <CardHeader className="py-3">
  119.                         <h6 className="m-0 font-weight-bold text-primary">Lista zgłoszeń</h6>
  120.                     </CardHeader>
  121.                     <CardBody>
  122.  
  123.                         <Table hover responsive className="light-blue-table mt-4">
  124.                             <thead>
  125.                                 <tr>
  126.                                     <th style={{ width: '60px' }}>Lp.</th>
  127.                                     <th></th>
  128.                                     <th style={{ width: '50px', textAlign: 'center' }}>Wiek</th>
  129.                                     <th style={{ width: '200px', textAlign: 'center' }}>Miasto</th>
  130.                                     <th style={{ width: '230px', textAlign: 'center' }}>Dane kontaktowe</th>
  131.                                     <th style={{ width: '120px', textAlign: 'center' }}>Ilość miejsc</th>
  132.                                     <th style={{ width: '200px', textAlign: 'center' }}>Dowiedział się z</th>
  133.                                     <th style={{ width: '150px', textAlign: 'center' }}>Data zgłoszenia</th>
  134.                                 </tr>
  135.                             </thead>
  136.                             <tbody>
  137.                                 {this.props.applications.map((application, index) => (
  138.                                     <tr key={application.id}>
  139.                                         <td style={{ textAlign: 'center' }}>{index + 1}.</td>
  140.                                         <td>
  141.                                             <small className="text-muted">Uczestnik:</small> <strong>{application.participant_name} {application.participant_surname}</strong><br></br>
  142.                                             <small className="text-muted">Opiekun:</small> {application.guardian_name} {application.guardian_surname}
  143.                                         </td>
  144.                                         <td style={{ textAlign: 'center' }}>
  145.                                             {application.age}
  146.                                         </td>
  147.                                         <td style={{ textAlign: 'center' }}>
  148.                                             {application.city}
  149.                                         </td>
  150.                                         <td style={{ textAlign: 'center' }}>
  151.                                             <a href={"mailto:" + application.email}>{application.email}</a><br></br>
  152.                                             {application.phone_number}
  153.                                         </td>
  154.                                         <td style={{ textAlign: 'center' }}>
  155.                                             {application.number_of_places}
  156.                                         </td>
  157.                                         <td style={{ textAlign: 'center' }}>
  158.                                             {application._how_did_you_know != null ? (
  159.                                                 <span>
  160.                                                     {application._how_did_you_know.name}
  161.                                                 </span>
  162.                                             ) : (
  163.                                                     <span>-</span>
  164.                                                 )
  165.                                             }
  166.                                         </td>
  167.                                         <td style={{ textAlign: 'center' }}>
  168.                                             {moment(application._application_date).format('DD-MM-YYYY')}
  169.                                         </td>
  170.                                     </tr>
  171.  
  172.                                 ))}
  173.                             </tbody>
  174.                         </Table>
  175.                     </CardBody>
  176.                 </Card>
  177.             </Layout>
  178.         )
  179.     }
  180. }
  181.  
  182.  
  183. export default withAuthSync(ApplicationsList)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top