frontend: add ConnectionSelect, useConnections
This commit is contained in:
parent
d7df75aa40
commit
0cbcdcaa9e
5 changed files with 61 additions and 17 deletions
|
@ -1,6 +1,10 @@
|
|||
@import "fonts";
|
||||
@import "colors";
|
||||
|
||||
html, html body, .form {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Dhurjati Regular";
|
||||
margin: 0;
|
||||
|
@ -24,10 +28,23 @@ header {
|
|||
}
|
||||
|
||||
.body {
|
||||
height: 100%;
|
||||
font-size: larger;
|
||||
ul.connections {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.form {
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
textarea, input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.row.content {
|
||||
height: 55%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,23 +1,12 @@
|
|||
import React, {useEffect, useState} from "react";
|
||||
|
||||
type Connection = {
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
import React from "react";
|
||||
import { useConnections } from "/hooks/useConnections";
|
||||
|
||||
export function Connections() {
|
||||
const [connections, setConnections] = useState<Connection[]>([]);
|
||||
const connections = useConnections();
|
||||
const items = connections.map((conn, i) => {
|
||||
return (<li key={i}>{conn.name}</li>);
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/servlet/connections")
|
||||
.then((res) => res.json())
|
||||
.then((conns: Connection[]) => setConnections(conns))
|
||||
}, []);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<span>Connections</span>
|
||||
|
|
10
twenty-frontend/src/js/components/forms/ConnectionSelect.tsx
Normal file
10
twenty-frontend/src/js/components/forms/ConnectionSelect.tsx
Normal file
|
@ -0,0 +1,10 @@
|
|||
import { useConnections } from "/hooks/useConnections";
|
||||
import React from "react";
|
||||
|
||||
export function ConnectionSelect() {
|
||||
const connections = useConnections();
|
||||
const options = connections.map((conn) => {
|
||||
return <option value={conn.id}>{conn.name}</option>
|
||||
})
|
||||
return (<select name="connection_id">{options}</select>)
|
||||
}
|
|
@ -1,10 +1,19 @@
|
|||
import React from "react";
|
||||
import { ConnectionSelect } from "/components/forms/ConnectionSelect";
|
||||
|
||||
export function NewIssueForm() {
|
||||
return (
|
||||
<form>
|
||||
<input name="title" type="text" placeholder="The title of the issue" />
|
||||
<button type="submit">Save</button>
|
||||
<form className="form">
|
||||
<div className="row">
|
||||
<ConnectionSelect/>
|
||||
<input name="title" type="text" placeholder="The title of the issue" />
|
||||
</div>
|
||||
<div className="row content">
|
||||
<textarea name="content"/>
|
||||
</div>
|
||||
<div className="row">
|
||||
<button type="submit">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
|
19
twenty-frontend/src/js/hooks/useConnections.ts
Normal file
19
twenty-frontend/src/js/hooks/useConnections.ts
Normal file
|
@ -0,0 +1,19 @@
|
|||
import { useState, useEffect } from "react";
|
||||
|
||||
type Connection = {
|
||||
id: number;
|
||||
name: string;
|
||||
path: string;
|
||||
}
|
||||
|
||||
export function useConnections() {
|
||||
const [conns, setConns] = useState<Connection[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/servlet/connections")
|
||||
.then((res) => res.json())
|
||||
.then((conns: Connection[]) => setConns(conns))
|
||||
}, []);
|
||||
|
||||
return conns;
|
||||
}
|
Loading…
Reference in a new issue