Skip to content

Commit

Permalink
Merge pull request #242 from xoRmalka/Bug-report-form
Browse files Browse the repository at this point in the history
feat: Bug report form
  • Loading branch information
xoRmalka authored Nov 27, 2023
2 parents c32d806 + e732fd4 commit 7d0f9fd
Show file tree
Hide file tree
Showing 6 changed files with 329 additions and 6 deletions.
29 changes: 28 additions & 1 deletion src/locale/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,5 +69,32 @@
"innovation_authority": "Innovation Authority",
"migdal_company": "\"A tower in the community\"",
"and_smaller_donors": "And other small contributions from my friends and fans of the workshop.",
"github_link": "Go to GitHub"
"github_link": "Go to GitHub",
"bug_title": "Title/Summary",
"bug_title_message": "Please enter a title/summary!",
"bug_description": "Description",
"bug_description_message": "Please enter a description!",
"bug_environment": "Environment",
"bug_environment_message": "Please enter the environment!",
"bug_expected_behavior": "Expected Behavior",
"bug_expected_behavior_message": "Please describe the expected behavior!",
"bug_actual_behavior": "Actual Behavior",
"bug_actual_behavior_message": "Please describe the actual behavior!",
"bug_reproducibility": "How often does it happen?",
"bug_reproducibility_message": "Please describe how often does it happen!",
"bug_attachments": "Attachments/Screenshots",
"bug_attachments_upload_button": "Click to Upload",
"bug_submit":"Submit Bug Report",
"bug_contact_name":"Full Name",
"bug_contact_name_message":"Please enter your full name!",
"bug_contact_email":"Email",
"bug_contact_email_message":"Please enter your email!",
"bug_form_description":"This form is designed so that we can receive feedback and improve the application.",
"bug_type":"Type of request",
"bug_type_message":"Please enter the type of request",
"bug_type_bug":"Bug",
"bug_type_feature":"Feature Request"



}
27 changes: 25 additions & 2 deletions src/locale/he.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,29 @@
"migdal_company": "“מגדל בקהילה“",
"and_smaller_donors": "ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.",
"gaps_patterns_page_title": "דפוסי נסיעות שלא יצאו",
"github_link": "למעבר אל GitHub"

"github_link": "למעבר אל GitHub",
"bug_title": "כותרת/סיכום",
"bug_title_message": "אנא הזן כותרת/סיכום!",
"bug_description": "תיאור",
"bug_description_message": "אנא הזן תיאור!",
"bug_environment": "סביבה (דפדפן, מערכת)",
"bug_environment_message": "אנא הזן את הסביבה!",
"bug_expected_behavior": "התנהגות צפויה",
"bug_expected_behavior_message": "אנא תאר את התנהגות הצפויה!",
"bug_actual_behavior": "התנהגות נוכחית",
"bug_actual_behavior_message": "אנא תאר את התנהגות הנוכחית!",
"bug_reproducibility": "באיזו תדירות זה קורה?",
"bug_reproducibility_message": "אנא תאר את באיזו תדירות זה קורה!",
"bug_attachments": "קבצים מצורפים/ צילומי מסך",
"bug_attachments_upload_button": "לחץ להעלאה",
"bug_submit": "שלח את הדוח",
"bug_contact_name":"שם מלא",
"bug_contact_name_message":"אנא הזן את שמך!",
"bug_contact_email":"אי-מייל",
"bug_contact_email_message":"אנא הזן כתובת אי-מייל!",
"bug_form_description":"טופס זה נועד על מנת שנוכל לקבל פידבק ולשפר את האפליקציה.",
"bug_type":"סוג הבקשה",
"bug_type_message":"אנא הזן סוג בקשה!",
"bug_type_bug":"באג",
"bug_type_feature":"בקשה לפיתוח"
}
166 changes: 166 additions & 0 deletions src/pages/BugReportForm .tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import React, { useState } from 'react'
import { TEXT_KEYS } from 'src/resources/texts'
import { useTranslation } from 'react-i18next'
import { Form, Input, Button, Upload, message, Select, FormProps } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
// import axios from 'axios'
import './BugReportForm.scss'
import { UploadChangeParam, UploadFile } from 'antd/lib/upload'
const { Option } = Select

interface BugReportFormData {
title: string
description: string
environment: string
expectedBehavior: string
actualBehavior: string
reproducibility: string
attachments: UploadFile[]
contactName: string
contactEmail: string
}

const BugReportForm: React.FC = () => {
const { t } = useTranslation()
const [form] = Form.useForm()
const [fileList, setFileList] = useState<UploadFile[]>([])
const [selectedType, setSelectedType] = useState<string | undefined>(undefined)

//Not implemented yet
const onFinish = async (values: BugReportFormData) => {
try {
// Send the bug report data to the server
// Include fileList in the values if needed

// const response = await axios.post('http://localhost:3001/create-issue', {
// ...values,
// attachments: fileList,
// })

console.log(values)

// Handle the server response
// message.success('Bug report submitted successfully!')
message.success('Not implemented!')
form.resetFields()
setFileList([]) // Reset fileList after submission
} catch (error) {
console.error('Error submitting bug report:', error)
message.error('Error submitting bug report. Please try again.')
}
}

const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
console.log('Failed:', errorInfo)
}

const onFileChange = (info: UploadChangeParam) => {
setFileList(info.fileList)
}

return (
<div className="bug-report-form-container">
<h1 className="logo">דאטאבוס</h1>

<span> {t(TEXT_KEYS.bug_form_description)} </span>
<br />
<br />

<Form
form={form}
name="bug-report"
onFinish={onFinish}
onFinishFailed={onFinishFailed}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}>
<Form.Item
label={t(TEXT_KEYS.bug_type)}
name="type"
initialValue={selectedType}
rules={[{ required: true, message: t(TEXT_KEYS.bug_type_message) }]}>
<Select onChange={(value) => setSelectedType(value)}>
<Option value="bug">{t(TEXT_KEYS.bug_type_bug)}</Option>
<Option value="feature">{t(TEXT_KEYS.bug_type_feature)}</Option>
</Select>
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_title)}
name="title"
rules={[{ required: true, message: t(TEXT_KEYS.bug_title_message) }]}>
<Input />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_contact_name)}
name="contactName"
rules={[{ required: true, message: t(TEXT_KEYS.bug_contact_name_message) }]}>
<Input />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_contact_email)}
name="contactEmail"
rules={[
{ required: true, message: t(TEXT_KEYS.bug_contact_email_message) },
// { type: 'email', message: t(TEXT_KEYS.bug_contact_email_valid_message) },
]}>
<Input />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_description)}
name="description"
rules={[{ required: true, message: t(TEXT_KEYS.bug_description_message) }]}>
<Input.TextArea rows={4} />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_environment)}
name="environment"
rules={[{ required: true, message: t(TEXT_KEYS.bug_environment_message) }]}>
<Input />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_expected_behavior)}
name="expectedBehavior"
rules={[{ required: true, message: t(TEXT_KEYS.bug_expected_behavior_message) }]}>
<Input.TextArea rows={4} />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_actual_behavior)}
name="actualBehavior"
rules={[{ required: true, message: t(TEXT_KEYS.bug_actual_behavior_message) }]}>
<Input.TextArea rows={4} />
</Form.Item>

<Form.Item
label={t(TEXT_KEYS.bug_reproducibility)}
name="reproducibility"
rules={[{ required: true, message: t(TEXT_KEYS.bug_reproducibility_message) }]}>
<Input />
</Form.Item>

<Form.Item label={t(TEXT_KEYS.bug_attachments)} name="attachments">
<Upload
beforeUpload={() => false}
listType="picture"
fileList={fileList}
onChange={onFileChange}>
<Button icon={<UploadOutlined />}>{t(TEXT_KEYS.bug_attachments_upload_button)}</Button>
</Upload>
</Form.Item>

<Form.Item wrapperCol={{ offset: 4, span: 16 }}>
<Button type="primary" htmlType="submit">
{t(TEXT_KEYS.bug_submit)}{' '}
</Button>
</Form.Item>
</Form>
</div>
)
}

export default BugReportForm
82 changes: 82 additions & 0 deletions src/pages/BugReportForm.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// BugReportForm.scss

.bug-report-form-container {
max-width: 800px;
width: 100%;
margin: 0 auto;
padding: 30px;
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

@media (max-width: 600px) {
padding: 15px;

h1.logo {
font-size: 24px;
margin: 10px auto;
border-top: 4px solid gray;
border-bottom: 6px solid gray;
}

.ant-form-item-label {
text-align: left;
}

.ant-btn-primary {
max-width: calc(100% - 100px);
margin: 0 auto;
display: block;
}
}

h1.logo {
position: relative;
margin: 20px auto;
width: 119px;
font-size: 30px;
border-top: 6px solid gray;
border-bottom: 8px solid gray;
padding-bottom: 0;
line-height: 25px;
text-align: center;
}

.ant-form-item {
margin-bottom: 20px;

&-label {
font-weight: bold;
text-align: right;
}
}

.ant-input,
.ant-input-textarea {
width: 100%;
}

.ant-upload {
width: 100%;
}

.ant-btn {
margin-right: 8px;

&-primary {
background-color: #1890ff;
border-color: #1890ff;
width: 100%;

&:hover {
background-color: #40a9ff;
border-color: #40a9ff;
}

&:focus {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
}
}
}
24 changes: 24 additions & 0 deletions src/resources/texts.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,30 @@ export const TEXT_KEYS = {
and_smaller_donors: 'and_smaller_donors',
gaps_patterns_page_title: 'gaps_patterns_page_title',
github_link: 'github_link',
bug_title: 'bug_title',
bug_title_message: 'bug_title_message',
bug_description: 'bug_description',
bug_description_message: 'bug_description_message',
bug_environment: 'bug_environment',
bug_environment_message: 'bug_environment_message',
bug_expected_behavior: 'bug_expected_behavior',
bug_expected_behavior_message: 'bug_expected_behavior_message',
bug_actual_behavior: 'bug_actual_behavior',
bug_actual_behavior_message: 'bug_actual_behavior_message',
bug_reproducibility: 'bug_reproducibility',
bug_reproducibility_message: 'bug_reproducibility_message',
bug_attachments: 'bug_attachments',
bug_attachments_upload_button: 'bug_attachments_upload_button',
bug_submit: 'bug_submit',
bug_contact_name: 'bug_contact_name',
bug_contact_name_message: 'bug_contact_name_message',
bug_contact_email: 'bug_contact_email',
bug_contact_email_message: 'bug_contact_email_message',
bug_form_description: 'bug_form_description',
bug_type: 'bug_type',
bug_type_message: 'bug_type_message',
bug_type_bug: 'bug_type_bug',
bug_type_feature: 'bug_type_feature',
}

export const TEXTS = {
Expand Down
7 changes: 4 additions & 3 deletions src/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { TEXT_KEYS } from 'src/resources/texts'
import { Navigate, Route, Routes } from 'react-router-dom'
import React, { lazy, Suspense } from 'react'
import { lazy, Suspense } from 'react'
const DashboardPage = lazy(() => import('../pages/dashboard/DashboardPage'))
const TimelinePage = lazy(() => import('../pages/TimelinePage'))
const GapsPage = lazy(() => import('../pages/GapsPage'))
const GapsPatternsPage = lazy(() => import('../pages/gapsPatterns'))
const RealtimeMapPage = lazy(() => import('../pages/RealtimeMapPage'))
const SingleLineMapPage = lazy(() => import('../pages/SingleLineMapPage'))
const About = lazy(() => import('../pages/About'))
const BugReportForm = lazy(() => import('../pages/BugReportForm '))
import CircularProgress from '@mui/material/CircularProgress'

import {
Expand Down Expand Up @@ -70,9 +71,9 @@ export const PAGES = [
},
{
label: TEXT_KEYS.report_a_bug_title,
path: 'https://github.com/hasadna/open-bus-map-search/issues/new',
path: 'report-a-bug',
icon: <BugOutlined />,
element: null,
element: <BugReportForm />,
},
{
label: TEXT_KEYS.donate_title,
Expand Down

0 comments on commit 7d0f9fd

Please sign in to comment.