Implement team names editor for tournament creation

js/EditableStringList.js

@@ -0,0 +1,110 @@
+import React from "react";
+import {Alert, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
+
+export default class EditableStringList extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            entries: props.entries
+        };
+        this.add = this.add.bind(this);
+        this.remove = this.remove.bind(this);
+    }
+
+    add(text) {
+        if (text === '' || this.state.entries.includes(text)) {
+            return false;
+        }
+        this.state.entries.push(text);
+        this.setState({entries: this.state.entries});
+        this.props.onChange(this.state.entries);
+        return true;
+    }
+
+    remove(text) {
+        let tmp = this.state.entries.filter(item => item !== text);
+        this.setState({entries: tmp});
+        this.props.onChange(tmp);
+    }
+
+    render() {
+        if ((typeof this.state.entries !== 'undefined') && this.state.entries.length > 0) {
+            return (
+                <div className="bg-light p-3 text-secondary font-italic">
+                    <StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
+                                 addButtonText={this.props.addButtonText}/>
+                    {this.state.entries.map((text) => <Item text={text} key={text}
+                                                            removeItem={this.remove}/>)}
+                </div>
+            );
+        } else {
+            return (
+                <div className="bg-light p-3 text-secondary text-center font-italic">
+                    <StringInput submit={this.add} placeholder={this.props.inputPlaceholder}
+                                 addButtonText={this.props.addButtonText}/>
+                    {this.props.placeholder}
+                </div>
+            );
+        }
+    }
+}
+
+class StringInput extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {value: ''};
+        this.handleChange = this.handleChange.bind(this);
+        this.submit = this.submit.bind(this);
+    }
+
+    handleChange(event) {
+        this.setState({value: event.target.value});
+    }
+
+    render() {
+        return (
+            <InputGroup className="mb-3">
+                <Input placeholder={this.props.placeholder} type="text" size="255" value={this.state.value} required
+                       onChange={this.handleChange} onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                        this.submit();
+                        return false;
+                    }
+                }}/>
+                <InputGroupAddon addonType="append">
+                    <Button color="success" outline={true}
+                            onClick={(e) => this.submit()}>{this.props.addButtonText}</Button>
+                </InputGroupAddon>
+            </InputGroup>
+        )
+    }
+
+    submit() {
+        if (this.props.submit(this.state.value)) {
+            this.setState({value: ''});
+        }
+    }
+}
+
+class Item extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: true
+        };
+        this.onDismiss = this.onDismiss.bind(this);
+    }
+
+    onDismiss() {
+        this.setState({visible: false});
+        this.props.removeItem(this.props.text);
+    }
+
+    render() {
+        return (
+            <Alert className="d-inline-block m-2" color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
+                {this.props.text}
+            </Alert>
+        );
+    }
+}

package.json

@@ -21,5 +21,8 @@
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
     "reactstrap": "^6.5.0"
+  },
+  "devDependencies": {
+    "react-editable-list": "0.0.3"
   }
 }

pages/create.js

@@ -2,19 +2,8 @@ import Head from 'next/head'
 import '../static/everypage.css'
 import {Footer, TurniereNavigation} from "../js/CommonComponents";
 import React from "react";
-import {
-    Button,
-    Card,
-    CardBody,
-    Container,
-    CustomInput, Fade,
-    Form,
-    FormGroup,
-    Input,
-    InputGroup,
-    InputGroupAddon,
-    Label
-} from "reactstrap";
+import {Button, Card, CardBody, Container, CustomInput, Fade, Form, FormGroup, Input, Label} from "reactstrap";
+import EditableStringList from "../js/EditableStringList";
 
 export default () => (
     <div className="main generic-fullpage-bg">
@@ -45,62 +34,57 @@ function CreateTournamentCard() {
 class CreateTournamentForm extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { fadeIn: false };
+        this.state = {fadeIn: false, teams: []};
         this.toggle = this.toggle.bind(this);
+        this.teamListUpdate = this.teamListUpdate.bind(this);
     }
 
     render() {
         return (
-            <Form>
-                <FormGroup>
-                    <Label for="name">Name des Turniers</Label>
-                    <Input type="text" name="name" size="255" required/>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="description">Beschreibung (optional)</Label>
-                    <Input type="text" name="description" size="255"/>
-                </FormGroup>
-                <FormGroup>
-                    <CustomInput type="checkbox" id="public" label="Turnier öffentlich anzeigen (schreibgeschützt)"/>
-                    <CustomInput type="checkbox" id="mix-teams" label="Teams mischen"/>
-                    <CustomInput type="checkbox" id="group-phase" label="Gruppenphase" onClick={this.toggle}/>
-                </FormGroup>
-                <FormGroup>
-                    <Label for="teams">Teams</Label>
-                    <InputGroup>
-                        <Input placeholder="Teamname" type="text" name="teams" size="255" required/>
-                        <InputGroupAddon addonType="append">
-                            <Button color="success">hinzufügen</Button>
-                        </InputGroupAddon>
-                    </InputGroup>
-                </FormGroup>
-                <TeamsContainer/>
-                <Fade in={this.state.fadeIn} tag="div" className="mt-3" baseClass="d-none" baseClassActive="d-block">
+            <div>
+                <Form>
                     <FormGroup>
-                        <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
-                        <Input type="number" name="teams-per-group" size="255"/>
+                        <Label for="name">Name des Turniers</Label>
+                        <Input type="text" name="name" size="255" required/>
                     </FormGroup>
                     <FormGroup>
-                        <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase weiterkommen?</Label>
-                        <Input type="number" name="teams-group-to-playoff" size="255"/>
+                        <Label for="description">Beschreibung (optional)</Label>
+                        <Input type="text" name="description" size="255"/>
                     </FormGroup>
-                </Fade>
-                <Button color="success" size="lg" className="w-100 shadow-sm mt-3">Turnier erstellen</Button>
-            </Form>
+                    <FormGroup>
+                        <CustomInput type="checkbox" id="public"
+                                     label="Turnier öffentlich anzeigen (schreibgeschützt)"/>
+                        <CustomInput type="checkbox" id="mix-teams" label="Teams mischen"/>
+                        <CustomInput type="checkbox" id="group-phase" label="Gruppenphase" onClick={this.toggle}/>
+                    </FormGroup>
+                    <Fade in={this.state.fadeIn} tag="div" className="mt-3" baseClass="d-none"
+                          baseClassActive="d-block">
+                        <FormGroup>
+                            <Label for="teams-per-group">Anzahl Teams pro Gruppe</Label>
+                            <Input type="number" name="teams-per-group" size="255"/>
+                        </FormGroup>
+                        <FormGroup>
+                            <Label for="teams-group-to-playoff">Wie viele Teams sollen nach der Gruppenphase
+                                weiterkommen?</Label>
+                            <Input type="number" name="teams-group-to-playoff" size="255"/>
+                        </FormGroup>
+                    </Fade>
+                </Form>
+                <h3 className="custom-font mt-4">Teams</h3>
+                <EditableStringList addButtonText="hinzufügen" placeholder="Keine Teams hinzugefügt!" entries={[]}
+                                    onChange={this.teamListUpdate} inputPlaceholder="Teamname"/>
+                <Button color="success" size="lg" className="w-100 shadow-sm mt-4">Turnier erstellen</Button>
+            </div>
         );
     }
 
+    teamListUpdate(list) {
+        this.setState({teams: list});
+    }
+
     toggle() {
         this.setState({
             fadeIn: !this.state.fadeIn
         });
     }
-}
-
-function TeamsContainer() {
-    return (
-        <div className="bg-light p-3 text-secondary text-center font-italic">
-            Noch keine Teams hinzugefügt!
-        </div>
-    );
 }