Skip to content

Commit 5692d2b

Browse files
keabardkeabard
committed
feat(admin): create event with JSON
1 parent 8821382 commit 5692d2b

12 files changed

Lines changed: 352 additions & 11 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎src/admin/project/new/Step2.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import RadioButtonGroup from '../../baseComponents/form/radioButton/RadioButtonG
77
import OFRadioButton from '../../baseComponents/form/radioButton/OFRadioButton.jsx'
88
import {
99
PROJECT_TYPE_HOVERBOARDV2,
10+
PROJECT_TYPE_JSON,
1011
PROJECT_TYPE_JSONURL,
1112
PROJECT_TYPE_OPENFEEDBACK,
1213
} from '../../../core/setupType/projectApi'
@@ -115,6 +116,27 @@ const Step2 = ({
115116
</div>
116117
}
117118
/>
119+
<Field
120+
component={OFRadioButton}
121+
name="projectType"
122+
id={PROJECT_TYPE_JSON}
123+
label={
124+
<div>
125+
<TranslatedTypography
126+
i18nKey="newEvent.step2.projectTypeJsonurl"
127+
component="h4"
128+
variant="h6">
129+
title
130+
</TranslatedTypography>
131+
<TranslatedTypography
132+
i18nKey="newEvent.step2.projectTypeJsonurlDetail"
133+
component="p"
134+
variant="subtitle1">
135+
detail
136+
</TranslatedTypography>
137+
</div>
138+
}
139+
/>
118140
</RadioButtonGroup>
119141

120142
{displayOrganizationSettings && (

‎src/admin/project/new/Step3JSON.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Step3JSON = ({
1717
return (
1818
<NewProjectLayout
1919
stepTitle={stepTitle}
20-
title={t('newEvent.step3.jsonurl')}
20+
title={t('newEvent.step3.json')}
2121
onCancel={onCancel}>
2222
<SetupJSON
2323
initialValues={initialValues}
@@ -27,7 +27,7 @@ const Step3JSON = ({
2727
rightColumnTitle={rightColumnTitle}
2828
onSubmit={values =>
2929
onSubmit({
30-
jsonUrl: values.jsonUrl,
30+
json: values.json,
3131
})
3232
}
3333
/>

‎src/admin/project/new/Step3JSONUrl.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
import NewProjectLayout from './NewProjectLayout.jsx'
3+
import SetupJSON from '../setupTypeForms/SetupJSON.jsx'
4+
import { useTranslation } from 'react-i18next'
5+
6+
const Step3JSONUrl = ({
7+
onCancel,
8+
onBack,
9+
onSubmit,
10+
stepTitle,
11+
submitText,
12+
backText,
13+
initialValues,
14+
rightColumnTitle,
15+
}) => {
16+
const { t } = useTranslation()
17+
return (
18+
<NewProjectLayout
19+
stepTitle={stepTitle}
20+
title={t('newEvent.step3.jsonurl')}
21+
onCancel={onCancel}>
22+
<SetupJSON
23+
initialValues={initialValues}
24+
onBack={onBack}
25+
submitText={submitText}
26+
backText={backText}
27+
rightColumnTitle={rightColumnTitle}
28+
onSubmit={values =>
29+
onSubmit({
30+
jsonUrl: values.jsonUrl,
31+
})
32+
}
33+
/>
34+
</NewProjectLayout>
35+
)
36+
}
37+
38+
export default Step3JSONUrl

‎src/admin/project/setupTypeForms/SetupJSON.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import Grid from '@mui/material/Grid'
33
import SetupJSONForm from './SetupJSONForm.jsx'
44
import {Typography} from '@mui/material'
55
import SetupValidationContainer from './validation/SetupValidationContainer.jsx'
6-
import {PROJECT_TYPE_JSONURL} from '../../../core/setupType/projectApi'
7-
import JsonUrlApi from '../../../core/setupType/jsonurl/JsonUrlApi'
6+
import {PROJECT_TYPE_JSON} from '../../../core/setupType/projectApi'
7+
import Json from '../../../core/setupType/json/Json.js'
88

99
const SetupJSON = ({
1010
submitText,
@@ -41,8 +41,8 @@ const SetupJSON = ({
4141
<Typography variant="h5" gutterBottom>
4242
{rightColumnTitle}
4343
</Typography>
44-
<SetupValidationContainer setupType={PROJECT_TYPE_JSONURL}
45-
api={new JsonUrlApi(formValues)}/>
44+
<SetupValidationContainer setupType={PROJECT_TYPE_JSON}
45+
api={new Json(formValues)}/>
4646
</Grid>}
4747
</Grid>
4848
)

‎src/admin/project/setupTypeForms/SetupJSONForm.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,7 @@ const SetupJSONForm = ({
5151
<Formik
5252
validationSchema={object().shape({
5353
jsonUrl: string()
54-
.url(t('settingsSetup.json.jsonUrlValid'))
55-
.required(t('settingsSetup.json.jsonUrlRequired')),
54+
.required(t('settingsSetup.json.jsonRequired')),
5655
})}
5756
initialValues={initialValues}
5857
onSubmit={(values) =>
@@ -69,9 +68,9 @@ const SetupJSONForm = ({
6968
/>
7069
)}
7170
<OFFormControlInputFormiked
72-
name={t('settingsSetup.json.fieldJsonUrl')}
73-
fieldName="jsonUrl"
74-
type="text"
71+
name={t('settingsSetup.json.fieldJson')}
72+
fieldName="json"
73+
type="textarea"
7574
isSubmitting={isSubmitting}
7675
/>
7776

‎src/admin/project/setupTypeForms/SetupJSONUrl.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React, {useState} from 'react'
2+
import Grid from '@mui/material/Grid'
3+
import SetupJSONUrlForm from './SetupJSONUrlForm.jsx'
4+
import {Typography} from '@mui/material'
5+
import SetupValidationContainer from './validation/SetupValidationContainer.jsx'
6+
import {PROJECT_TYPE_JSONURL} from '../../../core/setupType/projectApi.js'
7+
import JsonUrlApi from '../../../core/setupType/jsonurl/JsonUrlApi.js'
8+
9+
const SetupJSONUrl = ({
10+
submitText,
11+
leftColumnTitle,
12+
rightColumnTitle,
13+
onSubmit,
14+
initialValues,
15+
backText,
16+
onBack
17+
}) => {
18+
const [formChangeValues, onFormChange] = useState(null)
19+
20+
const formValues = formChangeValues || initialValues
21+
const isFieldNotEmpty = formValues && formValues.jsonUrl
22+
23+
return (
24+
<Grid container spacing={2}>
25+
<Grid item xs={12} sm={6}>
26+
<Typography variant="h5">
27+
{leftColumnTitle}
28+
</Typography>
29+
<SetupJSONUrlForm
30+
submitText={submitText}
31+
backText={backText}
32+
onSubmit={onSubmit}
33+
onBack={onBack}
34+
initialValues={initialValues}
35+
onFormChange={(values) => {
36+
onFormChange(values)
37+
}}
38+
/>
39+
</Grid>
40+
{isFieldNotEmpty && <Grid item xs={12} sm={6}>
41+
<Typography variant="h5" gutterBottom>
42+
{rightColumnTitle}
43+
</Typography>
44+
<SetupValidationContainer setupType={PROJECT_TYPE_JSONURL}
45+
api={new JsonUrlApi(formValues)}/>
46+
</Grid>}
47+
</Grid>
48+
)
49+
}
50+
51+
export default SetupJSONUrl

‎src/admin/project/setupTypeForms/SetupJSONUrlForm.jsx‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import React, { useState } from 'react'
2+
import { object, string } from 'yup'
3+
import { Form, Formik } from 'formik'
4+
import OFFormControlInputFormiked from '../../baseComponents/form/formControl/OFFormControlInputFormiked.jsx'
5+
import OFButton from '../../baseComponents/button/OFButton.jsx'
6+
import Collapse from '@mui/material/Collapse'
7+
import { makeStyles } from '@mui/styles'
8+
import ArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
9+
import Box from '@mui/material/Box'
10+
import { FormikObserver } from '../../baseComponents/form/formik/FormikObserver.js'
11+
import jsonModel from './jsonmodel'
12+
import clipboardCopy from 'clipboard-copy'
13+
import Button from '@mui/material/Button'
14+
import { useTranslation } from 'react-i18next'
15+
16+
const useStyles = makeStyles(() => ({
17+
jsonShowButton: {
18+
width: '100%',
19+
},
20+
jsonExample: {
21+
background: '#EEE',
22+
padding: 12,
23+
marginTop: 32,
24+
},
25+
jsonExamplePre: {
26+
overflow: 'auto',
27+
},
28+
jsonExampleInnerContainer: {
29+
position: 'relative',
30+
},
31+
jsonCopyButton: {
32+
position: 'absolute',
33+
right: 0,
34+
top: 10,
35+
},
36+
}))
37+
38+
const SetupJSONUrlForm = ({
39+
onBack,
40+
onSubmit,
41+
submitText,
42+
backText,
43+
initialValues,
44+
onFormChange,
45+
}) => {
46+
const classes = useStyles()
47+
const [isExampleOpen, setExampleOpen] = useState(false)
48+
const { t } = useTranslation()
49+
50+
return (
51+
<Formik
52+
validationSchema={object().shape({
53+
jsonUrl: string()
54+
.url(t('settingsSetup.jsonUrl.jsonUrlValid'))
55+
.required(t('settingsSetup.jsonUrl.jsonUrlRequired')),
56+
})}
57+
initialValues={initialValues}
58+
onSubmit={(values) =>
59+
onSubmit({
60+
jsonUrl: values.jsonUrl,
61+
})
62+
}>
63+
{({ isSubmitting, values }) => (
64+
<Form method="POST">
65+
{onFormChange && (
66+
<FormikObserver
67+
value={values}
68+
onChange={(values) => onFormChange(values)}
69+
/>
70+
)}
71+
<OFFormControlInputFormiked
72+
name={t('settingsSetup.jsonUrl.fieldJsonUrl')}
73+
fieldName="jsonUrl"
74+
type="text"
75+
isSubmitting={isSubmitting}
76+
/>
77+
78+
<div className={classes.jsonExample}>
79+
<Button
80+
className={classes.jsonShowButton}
81+
onClick={() => setExampleOpen(!isExampleOpen)}>
82+
{t('settingsSetup.jsonUrl.showJsonModel')}{' '}
83+
<ArrowDownIcon />
84+
</Button>
85+
<Collapse
86+
in={isExampleOpen}
87+
className={classes.jsonExampleInnerContainer}>
88+
<OFButton
89+
style={{ design: 'text' }}
90+
variant="outlined"
91+
className={classes.jsonCopyButton}
92+
onClick={() =>
93+
clipboardCopy(
94+
JSON.stringify(jsonModel, undefined, 4)
95+
)
96+
}>
97+
{t('common.copy')}
98+
</OFButton>
99+
<pre className={classes.jsonExamplePre}>
100+
{JSON.stringify(jsonModel, undefined, 4)}
101+
<br />
102+
Required fields:
103+
<br />
104+
- session.title
105+
<br />
106+
- session.id
107+
<br />- speakers: {'{}'}
108+
<br />
109+
Optional fields: all others
110+
</pre>
111+
</Collapse>
112+
</div>
113+
114+
<Box justifyContent="space-between" display="flex">
115+
{backText && (
116+
<OFButton
117+
disabled={isSubmitting}
118+
onClick={() => onBack(values)}
119+
style={{
120+
type: 'big',
121+
design: 'text',
122+
marginTop: 64,
123+
}}>
124+
{backText}
125+
</OFButton>
126+
)}
127+
128+
{submitText && (
129+
<OFButton
130+
disabled={isSubmitting}
131+
type="submit"
132+
style={{ type: 'big', marginTop: 64 }}>
133+
{submitText}
134+
</OFButton>
135+
)}
136+
</Box>
137+
</Form>
138+
)}
139+
</Formik>
140+
)
141+
}
142+
143+
export default SetupJSONUrlForm

‎src/admin/translations/languages/en.admin.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@
106106
"create": "Create event",
107107
"projectTypeHoverboard": "Hoverboard v2 Firestore",
108108
"projectTypeHoverboardDetail": "The talks/speakers/schedule will be retrieved directly on page load from your own Firestore database that follow Hoverboard v2 model.",
109+
"projectTypeJson": "JSON",
110+
"projectTypeJsonDetail": "Provide a JSON. The json model will need to match OpenFeedback one, you’ll be able to check it on the next screen.",
109111
"projectTypeJsonurl": "JSON API URL",
110112
"projectTypeJsonurlDetail": "Provide an url to a .json that you’ll either host (on gist.github.com or another static server) or a dynamic answer from your own database/api. The json model will need to match OpenFeedback one, you’ll be able to check it on the next screen.",
111113
"projectTypeOpenfeedback": "OpenFeedback Database (default)",
@@ -119,6 +121,7 @@
119121
"step3": {
120122
"back": "Back",
121123
"firebaseCredentials": "Enter your Firebase credentials",
124+
"json": "What's your JSON file?",
122125
"jsonurl": "What's the URL of the API or JSON file?",
123126
"notManaged": "This project type is not managed, this should not happen, either your not a good dev, or ¯\\_(ツ)_/¯",
124127
"stepTitle": "Create a new event (step 3/3)",
@@ -208,6 +211,11 @@
208211
"projectIdRequired": "The Firebase project ID is required"
209212
},
210213
"json": {
214+
"fieldJson": "JSON",
215+
"jsonRequired": "The JSON is required",
216+
"showJsonModel": "Show JSON model"
217+
},
218+
"jsonUrl": {
211219
"fieldJsonUrl": "JSON API URL",
212220
"jsonUrlRequired": "The API URL is required",
213221
"jsonUrlValid": "The API URL must be a valid url",

‎src/admin/translations/languages/fr.admin.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,8 @@
106106
"create": "Créer un évènement",
107107
"projectTypeHoverboard": "Hoverboard v2 Firestore",
108108
"projectTypeHoverboardDetail": "Les présentations / orateurs / calendrier seront récupérés directement au chargement de la page à partir de votre propre base de données Firestore en suivant le modèle de Hoverboard v2.",
109+
"projectTypeJson": "JSON",
110+
"projectTypeJsonDetail": "Vous fournissez un .json. Le modèle du .json devra correspondre à celui d'OpenFeedback, vous pourrez le vérifier sur l'écran suivant. ",
109111
"projectTypeJsonurl": "JSON API URL",
110112
"projectTypeJsonurlDetail": "Vous fournissez une URL vers un .json que vous hébergerez (sur gist.github.com ou un autre serveur statique) ou une API pour votre propre base de donnée. Le modèle du .json devra correspondre à celui d'OpenFeedback, vous pourrez le vérifier sur l'écran suivant. ",
111113
"projectTypeOpenfeedback": "Base de donnée OpenFeedback (par défaut)",
@@ -119,6 +121,7 @@
119121
"step3": {
120122
"back": "Retour",
121123
"firebaseCredentials": "Entrez vos informations d'identification Firebase",
124+
"json": "Quel est votre JSON ?",
122125
"jsonurl": "Quelle est l'URL de votre API ou du JSON ?",
123126
"notManaged": "Ce type de projet n'est pas géré, cela ne devrait pas se produire, soit vous n'êtes pas un bon développeur, soit ¯ \\ _ (ツ) _ / ¯",
124127
"stepTitle": "Créer un nouvel événement (étape 3/3)",
@@ -208,6 +211,11 @@
208211
"projectIdRequired": "L'ID de projet Firebase est obligatoire"
209212
},
210213
"json": {
214+
"fieldJson": "JSON",
215+
"jsonUrlRequired": "Le JSON est obligatoire",
216+
"showJsonModel": "Afficher le modèle JSON"
217+
},
218+
"jsonUrl": {
211219
"fieldJsonUrl": "JSON API URL",
212220
"jsonUrlRequired": "L'URL de l'API est obligatoire",
213221
"jsonUrlValid": "L'URL de l'API doit être une URL valide",

0 commit comments

Comments
 (0)