From c009bea662d9fc875c8e7cb266cebbfc2985f226 Mon Sep 17 00:00:00 2001 From: Cláudio Date: Tue, 26 Jan 2021 14:54:58 -0300 Subject: Partial commit for #158 - Component GBButton created - New issue form partially created (only title) - Refactoring for GBButon usage Next steps - Practice GraphQL calls - Finish New issue form (add first comment and submit) --- webui/src/pages/new/NewPage.tsx | 80 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 webui/src/pages/new/NewPage.tsx (limited to 'webui/src/pages/new') diff --git a/webui/src/pages/new/NewPage.tsx b/webui/src/pages/new/NewPage.tsx new file mode 100644 index 00000000..b485987e --- /dev/null +++ b/webui/src/pages/new/NewPage.tsx @@ -0,0 +1,80 @@ +import { gql, useMutation } from '@apollo/client'; +import React, { FormEvent } from 'react'; + +import Paper from '@material-ui/core/Paper/Paper'; +import TextField from '@material-ui/core/TextField/TextField'; +import { fade, makeStyles, Theme } from '@material-ui/core/styles'; + +import GBButton from '../../components/Button/GBButton'; + +/** + * Styles + */ +const useStyles = makeStyles((theme) => ({ + main: { + maxWidth: 800, + margin: 'auto', + marginTop: theme.spacing(4), + marginBottom: theme.spacing(4), + padding: theme.spacing(2), + overflow: 'hidden', + }, + titleInput: { + borderRadius: theme.shape.borderRadius, + borderColor: fade(theme.palette.primary.main, 0.2), + borderStyle: 'solid', + borderWidth: '1px', + backgroundColor: fade(theme.palette.primary.main, 0.05), + padding: theme.spacing(0, 0), + transition: theme.transitions.create([ + 'width', + 'borderColor', + 'backgroundColor', + ]), + }, + form: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + }, +})); + +const NEW_BUG = gql` + mutation NewBug($input: NewBugInput) { + newBug(input: $input) { + title + message + } + } +`; + +/** + * Form to create a new issue + */ +function NewPage() { + const classes = useStyles({ searching: false }); + const [newBugInput] = useMutation(NEW_BUG); + + function submitNewIssue(e: FormEvent) { + e.preventDefault(); + // TODO Call API + } + + return ( + +
+ + + +
+ ); +} + +export default NewPage; -- cgit From f8d41c3bcda516cd33be25475ac52ab72c376e1f Mon Sep 17 00:00:00 2001 From: Cláudio Date: Thu, 28 Jan 2021 21:24:40 -0300 Subject: Partial commit for #158 - It´s possible to create new issues from webui (only title) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Next step - Finish new issue form (First comment field and style) - Update Readme about codegen usage and enforcing playground usage --- webui/src/pages/new/NewBug.graphql | 7 ++++ webui/src/pages/new/NewBugPage.tsx | 85 ++++++++++++++++++++++++++++++++++++++ webui/src/pages/new/NewPage.tsx | 80 ----------------------------------- 3 files changed, 92 insertions(+), 80 deletions(-) create mode 100644 webui/src/pages/new/NewBug.graphql create mode 100644 webui/src/pages/new/NewBugPage.tsx delete mode 100644 webui/src/pages/new/NewPage.tsx (limited to 'webui/src/pages/new') diff --git a/webui/src/pages/new/NewBug.graphql b/webui/src/pages/new/NewBug.graphql new file mode 100644 index 00000000..92df016e --- /dev/null +++ b/webui/src/pages/new/NewBug.graphql @@ -0,0 +1,7 @@ +mutation newBug($input: NewBugInput!) { + newBug(input: $input) { + bug { + humanId + } + } +} \ No newline at end of file diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx new file mode 100644 index 00000000..925034e1 --- /dev/null +++ b/webui/src/pages/new/NewBugPage.tsx @@ -0,0 +1,85 @@ +import React, { FormEvent } from 'react'; + +import Paper from '@material-ui/core/Paper/Paper'; +import TextField from '@material-ui/core/TextField/TextField'; +import { fade, makeStyles, Theme } from '@material-ui/core/styles'; + +import { useNewBugMutation } from './NewBug.generated'; + +/** + * Styles + */ +const useStyles = makeStyles((theme: Theme) => ({ + main: { + maxWidth: 800, + margin: 'auto', + marginTop: theme.spacing(4), + marginBottom: theme.spacing(4), + padding: theme.spacing(2), + overflow: 'hidden', + }, + titleInput: { + borderRadius: theme.shape.borderRadius, + borderColor: fade(theme.palette.primary.main, 0.2), + borderStyle: 'solid', + borderWidth: '1px', + backgroundColor: fade(theme.palette.primary.main, 0.05), + padding: theme.spacing(0, 0), + transition: theme.transitions.create([ + 'width', + 'borderColor', + 'backgroundColor', + ]), + }, + form: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'flex-end', + }, +})); + +/** + * Form to create a new issue + */ +function NewBugPage() { + const classes = useStyles(); + let inputField: any; + const [newBug, { loading, error }] = useNewBugMutation(); + + function submitNewIssue(e: FormEvent) { + e.preventDefault(); + newBug({ + variables: { + input: { + title: String(inputField.value), + message: 'Message', //TODO + }, + }, + }); + inputField.value = ''; + } + + if (loading) return
Loading
; + if (error) return
Error
; + + return ( + +
+ { + inputField = node; + }} + label="Title" + className={classes.titleInput} + variant="outlined" + fullWidth + margin="dense" + /> + + +
+ ); +} + +export default NewBugPage; diff --git a/webui/src/pages/new/NewPage.tsx b/webui/src/pages/new/NewPage.tsx deleted file mode 100644 index b485987e..00000000 --- a/webui/src/pages/new/NewPage.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { gql, useMutation } from '@apollo/client'; -import React, { FormEvent } from 'react'; - -import Paper from '@material-ui/core/Paper/Paper'; -import TextField from '@material-ui/core/TextField/TextField'; -import { fade, makeStyles, Theme } from '@material-ui/core/styles'; - -import GBButton from '../../components/Button/GBButton'; - -/** - * Styles - */ -const useStyles = makeStyles((theme) => ({ - main: { - maxWidth: 800, - margin: 'auto', - marginTop: theme.spacing(4), - marginBottom: theme.spacing(4), - padding: theme.spacing(2), - overflow: 'hidden', - }, - titleInput: { - borderRadius: theme.shape.borderRadius, - borderColor: fade(theme.palette.primary.main, 0.2), - borderStyle: 'solid', - borderWidth: '1px', - backgroundColor: fade(theme.palette.primary.main, 0.05), - padding: theme.spacing(0, 0), - transition: theme.transitions.create([ - 'width', - 'borderColor', - 'backgroundColor', - ]), - }, - form: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - justifyContent: 'flex-end', - }, -})); - -const NEW_BUG = gql` - mutation NewBug($input: NewBugInput) { - newBug(input: $input) { - title - message - } - } -`; - -/** - * Form to create a new issue - */ -function NewPage() { - const classes = useStyles({ searching: false }); - const [newBugInput] = useMutation(NEW_BUG); - - function submitNewIssue(e: FormEvent) { - e.preventDefault(); - // TODO Call API - } - - return ( - -
- - - -
- ); -} - -export default NewPage; -- cgit From d673eb97fec5a79f21c13232392c3e1fe48f9589 Mon Sep 17 00:00:00 2001 From: Cláudio Date: Fri, 29 Jan 2021 08:29:49 -0300 Subject: Partial commit for #158 - Fix for unexpected change in AppBar style when importing Paper see: https://github.com/mui-org/material-ui/issues/19157 --- webui/src/pages/new/NewBugPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'webui/src/pages/new') diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index 925034e1..118966ed 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,6 +1,6 @@ import React, { FormEvent } from 'react'; -import Paper from '@material-ui/core/Paper/Paper'; +import Paper from '@material-ui/core/Paper'; import TextField from '@material-ui/core/TextField/TextField'; import { fade, makeStyles, Theme } from '@material-ui/core/styles'; -- cgit From a5e0deeec1db25c6e917f4ade253ac0bda524532 Mon Sep 17 00:00:00 2001 From: Cláudio Date: Fri, 29 Jan 2021 18:39:19 -0300 Subject: Partial commit for #158 - It´s possible to create new issue with title and first message from webui - form simple validation - Extraction from CommentForm to create a generic component for Comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Next steps - Styles - Readme update about codegen usage and enforcing playground usage --- webui/src/pages/new/NewBugPage.tsx | 51 ++++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 11 deletions(-) (limited to 'webui/src/pages/new') diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index 118966ed..b451a247 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -1,13 +1,16 @@ -import React, { FormEvent } from 'react'; +import React, { FormEvent, useState } from 'react'; +import { Button } from '@material-ui/core'; import Paper from '@material-ui/core/Paper'; import TextField from '@material-ui/core/TextField/TextField'; import { fade, makeStyles, Theme } from '@material-ui/core/styles'; +import CommentInput from '../bug/CommentInput'; + import { useNewBugMutation } from './NewBug.generated'; /** - * Styles + * Css in JS styles */ const useStyles = makeStyles((theme: Theme) => ({ main: { @@ -33,8 +36,10 @@ const useStyles = makeStyles((theme: Theme) => ({ }, form: { display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', + flexDirection: 'column', + }, + actions: { + display: 'flex', justifyContent: 'flex-end', }, })); @@ -43,21 +48,31 @@ const useStyles = makeStyles((theme: Theme) => ({ * Form to create a new issue */ function NewBugPage() { - const classes = useStyles(); - let inputField: any; const [newBug, { loading, error }] = useNewBugMutation(); + const [issueTitle, setIssueTitle] = useState(''); + const [issueComment, setIssueComment] = useState(''); + const classes = useStyles(); + let issueTitleInput: any; function submitNewIssue(e: FormEvent) { e.preventDefault(); + if (!isFormValid()) return; + console.log('submitNewISsue'); + console.log('title: ', issueTitle); + console.log('comment: ', issueComment); newBug({ variables: { input: { - title: String(inputField.value), - message: 'Message', //TODO + title: issueTitle, + message: issueComment, }, }, }); - inputField.value = ''; + issueTitleInput.value = ''; + } + + function isFormValid() { + return issueTitle.length > 0 && issueComment.length > 0 ? true : false; } if (loading) return
Loading
; @@ -68,15 +83,29 @@ function NewBugPage() {
{ - inputField = node; + issueTitleInput = node; }} label="Title" className={classes.titleInput} variant="outlined" fullWidth margin="dense" + onChange={(event: any) => setIssueTitle(event.target.value)} + /> + setIssueComment(comment)} /> - +
+ +
); -- cgit From 33d53e17579e065529783b2c36342387bad86341 Mon Sep 17 00:00:00 2001 From: Cláudio Date: Fri, 29 Jan 2021 22:28:24 -0300 Subject: Commit for #158 --- webui/src/pages/new/NewBugPage.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'webui/src/pages/new') diff --git a/webui/src/pages/new/NewBugPage.tsx b/webui/src/pages/new/NewBugPage.tsx index b451a247..c8e68e7b 100644 --- a/webui/src/pages/new/NewBugPage.tsx +++ b/webui/src/pages/new/NewBugPage.tsx @@ -42,6 +42,13 @@ const useStyles = makeStyles((theme: Theme) => ({ display: 'flex', justifyContent: 'flex-end', }, + gitbugButton: { + backgroundColor: '#2ea44fd9', + color: '#fff', + '&:hover': { + backgroundColor: '#2ea44f', + }, + }, })); /** @@ -98,8 +105,8 @@ function NewBugPage() { />