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 "fonts";
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
|
html, html body, .form {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Dhurjati Regular";
|
font-family: "Dhurjati Regular";
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -24,10 +28,23 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
|
height: 100%;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
ul.connections {
|
ul.connections {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style-type: none;
|
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";
|
import React from "react";
|
||||||
|
import { useConnections } from "/hooks/useConnections";
|
||||||
type Connection = {
|
|
||||||
name: string;
|
|
||||||
path: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Connections() {
|
export function Connections() {
|
||||||
const [connections, setConnections] = useState<Connection[]>([]);
|
const connections = useConnections();
|
||||||
const items = connections.map((conn, i) => {
|
const items = connections.map((conn, i) => {
|
||||||
return (<li key={i}>{conn.name}</li>);
|
return (<li key={i}>{conn.name}</li>);
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
fetch("/servlet/connections")
|
|
||||||
.then((res) => res.json())
|
|
||||||
.then((conns: Connection[]) => setConnections(conns))
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<span>Connections</span>
|
<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 React from "react";
|
||||||
|
import { ConnectionSelect } from "/components/forms/ConnectionSelect";
|
||||||
|
|
||||||
export function NewIssueForm() {
|
export function NewIssueForm() {
|
||||||
return (
|
return (
|
||||||
<form>
|
<form className="form">
|
||||||
<input name="title" type="text" placeholder="The title of the issue" />
|
<div className="row">
|
||||||
<button type="submit">Save</button>
|
<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>
|
</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