Ticket relations changed. Q Label added.

Author: marek-kozlovsky-ata

src/components/ticket/CategorizedTicketsList.js

@@ -11,7 +11,7 @@ function createTicketLines(tickets) {
                            name={ticket.name}
                            description={ticket.description}
                            url={ticket.url}
-                           customFields={ticket.customFields}
+                           relations={ticket.relations}
         />;
     }) : <Alert variant={"light"} className={"h-10"}>
         The list is empty.
@@ -42,6 +42,7 @@ export class CategorizedTicketsList extends React.Component {
         }).then(response => {
             return response.data;
         }).then(ticketsInCategories => {
+            console.log(ticketsInCategories)
             this.setState({
                 formTickets: ticketsInCategories.formTickets,
                 formVersionTickets: ticketsInCategories.formVersionTickets,

src/components/ticket/CreateTicketForm.js

@@ -1,9 +1,77 @@
 import React from "react";
+import ListGroup from "react-bootstrap/ListGroup";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Card from "react-bootstrap/Card";
+import Form from "react-bootstrap/Form";
+import ToggleButton from "react-bootstrap/ToggleButton";
 
 export class CreateTicketForm extends React.Component {
 
+    constructor() {
+        super();
+        this.state = {
+            relateToForm: false,
+            relateToFormVersion: false,
+            relateToQuestion: false
+        }
+    }
+
     render() {
-        return <div/>;
+
+        return <Card>
+            <ListGroup variant="flush">
+                <ListGroup.Item>
+                    <div>
+                        <Row>
+                            <Col>
+                                <div>
+                                    <Form.Group controlId="ticketName">
+                                        <Form.Label>Name</Form.Label>
+                                        <Form.Control type="text" placeholder="ticket name"/>
+                                    </Form.Group>
+                                    <Form.Group controlId="ticketName">
+                                        <Form.Label>Description</Form.Label>
+                                        <Form.Control as="textarea"
+                                                      placeholder="ticket description"
+                                                      name="ticketDescription" rows={3}
+                                                      onChange={this.onChangeSetState}/>
+                                    </Form.Group>
+                                    <ToggleButton variant="light" style={{marginBottom: "0"}} type="checkbox"
+                                                  checked={this.state.relateToForm}
+                                                  value="1"
+                                                  onChange={e => this.setState({relateToForm: e.currentTarget.checked})}>
+                                        {' '} Relate to form
+                                    </ToggleButton>
+                                    {' '}
+                                    <ToggleButton variant="light" style={{marginBottom: "0"}} type="checkbox"
+                                                  checked={this.state.relateToFormVersion}
+                                                  value="1"
+                                                  onChange={e => this.setState({relateToFormVersion: e.currentTarget.checked})}>
+                                        {' '} Relate to form version
+                                    </ToggleButton>
+                                    {' '}
+                                    <ToggleButton variant="light" style={{marginBottom: "0"}} type="checkbox"
+                                                  checked={this.state.relateToQuestion}
+                                                  value="1"
+                                                  onChange={e => this.setState({relateToQuestion: e.currentTarget.checked})}>
+                                        {' '} Relate to question (origin path)
+                                    </ToggleButton>
+                                    <br/>
+                                    {/*<Form.Group controlId="questionOrigin">*/}
+                                    {/*    <Form.Label>Question-Origin</Form.Label>*/}
+                                    {/*    <Form.Control as="text"*/}
+                                    {/*                  placeholder={"question origin path"}*/}
+                                    {/*                  name="questionOriginPath" // TODO: DAG select*/}
+                                    {/*                  onChange={this.onChangeSetState}/>*/}
+                                    {/*</Form.Group>*/}
+                                </div>
+                            </Col>
+                        </Row>
+                    </div>
+                </ListGroup.Item>
+            </ListGroup>
+        </Card>;
     }
 
 }

src/components/ticket/TicketLine.js

@@ -7,6 +7,8 @@ import Card from "react-bootstrap/Card";
 export class TicketLine extends React.Component {
 
     render() {
+
+
         return <Card>
             <ListGroup variant="flush">
                 <ListGroup.Item>
@@ -21,12 +23,13 @@ export class TicketLine extends React.Component {
                                     <br/>
                                     <span>Link: <a href={this.props.url} target="_blank">link</a></span>
                                     <br/>
-                                    <span>Form version identifier: <b>{this.props?.customFields["SpecificFormVersionKEY"]}</b></span>
+                                    <span>Form version identifier: <b>{this.props.relations?.relatedForm}</b></span>
                                     <br/>
-                                    <span>Form identifier: <b>{this.props?.customFields["SpecificFormCU"]}</b></span>
+                                    <span>Form identifier: <b>{this.props.relations?.relatedFormVersion}</b></span>
                                     <br/>
-                                    <span>Question: <b>{this.props?.customFields["SpecificQuestionQO"]}</b></span>
+                                    <span>Question origin path: {this.props.relations?.relatedQuestionOriginPath}</span>
                                     <br/>
+                                    <span>Question label: <b>{this.props.relations?.relatedQuestionLabel}</b></span>
 
                                 </div>
                             </Col>