Skip to content

GitLab

Commit bed33609 authored by Christopher Guindon's avatar Christopher Guindon
Browse files

Code formating improvements 


Signed-off-by: Christopher Guindon's avatarChristopher Guindon <chris.guindon@eclipse-foundation.org>
parent e086fb1b
Expand all Hide whitespace changes
Inline Side-by-side
src/main/js/App.less
View file @ bed33609
// The Less file used to compiled as App.css
.eclipseFdn-membership-webform {
.error {
color: red;
}
.error {
color: red;
}
.orange-star {
color: #f78700;
font-weight: bold;
font-size: larger;
}
.orange-star {
color: #f78700;
font-weight: bold;
font-size: larger;
}
.display-center {
display: flex;
align-items: center;
justify-content: center;
}
.form-control {
border-radius: 5px;
box-shadow: none;
height: 36px;
}
label {
font-weight: unset;
}
.form-border-error {
border-color: red;
}
.btn {
margin: 0 10px;
border-radius: 5px;
}
.button-container {
display: flex;
align-items: center;
justify-content: center;
}
label#effective-date-label {
display: none;
}
select.form-control {
width: 50%;
}
.align-center {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
input[type=checkbox] {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 5px;
margin-top: 0;
margin-right: 15px;
}
input[type=checkbox]:checked {
background-color: orange;
}
.verical-center {
display: flex;
align-items: center;
}
input[type=checkbox]:focus {
outline: none !important;
}
.preview-field {
padding: 5px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 5px;
background: #fff;
min-height: 32px;
}
/* Stepper */
.stepper {
display: flex;
flex-wrap: wrap;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.step {
width: calc(100% / 3);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding-top: 30px;
}
.step-span {
width: 50px;
height: 50px;
background: #f7941e;
}
.step-span-index {
font-size: xx-large;
font-weight: 600;
padding-left: 15px;
}
.step-title {
padding: 10px;
font-weight: 600;
}
.step-title-container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 60px;
min-width: 100px;
background-color: #e2e2e2;
position: relative;
top: 15px;
left: 15px;
}
.step-title-container-active:extend(.eclipseFdn-membership-webform .step-title-container) {
// &:extend(.step-title-container);
background: #404040 50% no-repeat;
color: white;
}
.display-center {
display: flex;
align-items: center;
justify-content: center;
}
.form-control {
border-radius: 5px;
box-shadow: none;
height: 36px;
}
label {
font-weight: unset;
}
.form-border-error {
border-color: red;
}
.btn {
margin: 0 10px;
border-radius: 5px;
}
.button-container {
display: flex;
align-items: center;
justify-content: center;
}
label#effective-date-label {
display: none;
}
select.form-control {
width: 50%;
}
.align-center {
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
input[type="checkbox"] {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 5px;
margin-top: 0;
margin-right: 15px;
}
// Mobile First
@media (min-width: 992px) {
.step {
width: calc(100% / 6);
padding-top: 10px;
}
input[type="checkbox"]:checked {
background-color: orange;
}
.verical-center {
display: flex;
align-items: center;
}
input[type="checkbox"]:focus {
outline: none !important;
}
.preview-field {
padding: 5px;
border: 1px solid hsl(0, 0%, 80%);
border-radius: 5px;
background: #fff;
min-height: 32px;
}
/* Stepper */
.stepper {
display: flex;
flex-wrap: wrap;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}
.step {
width: calc(100% / 3);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
padding-top: 30px;
}
.step-span {
width: 50px;
height: 50px;
background: #f7941e;
}
.step-span-index {
font-size: xx-large;
font-weight: 600;
padding-left: 15px;
}
.step-title {
padding: 10px;
font-weight: 600;
}
.step-title-container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 60px;
min-width: 100px;
background-color: #e2e2e2;
position: relative;
top: 15px;
left: 15px;
}
.step-title-container-active:extend(.eclipseFdn-membership-webform
.step-title-container) {
// &:extend(.step-title-container);
background: #404040 50% no-repeat;
color: white;
}
// Mobile First
@media (min-width: 992px) {
.step {
width: calc(100% / 6);
padding-top: 10px;
}
}
\ No newline at end of file
}
}
src/main/js/src/App.css
View file @ bed33609
......@@ -50,7 +50,7 @@
.eclipseFdn-membership-webform .input-group .form-control {
z-index: unset;
}
.eclipseFdn-membership-webform input[type=checkbox] {
.eclipseFdn-membership-webform input[type="checkbox"] {
display: inline-block;
width: 30px;
height: 30px;
......@@ -59,14 +59,14 @@
margin-top: 0;
margin-right: 15px;
}
.eclipseFdn-membership-webform input[type=checkbox]:checked {
.eclipseFdn-membership-webform input[type="checkbox"]:checked {
background-color: orange;
}
.eclipseFdn-membership-webform .verical-center {
display: flex;
align-items: center;
}
.eclipseFdn-membership-webform input[type=checkbox]:focus {
.eclipseFdn-membership-webform input[type="checkbox"]:focus {
outline: none !important;
}
.eclipseFdn-membership-webform .preview-field {
......
src/main/js/src/App.js
View file @ bed33609
import React, { useState } from 'react';
import './App.css';
import AppFooter from './components/layout/AppFooter';
import AppHeader from './components/layout/AppHeader';
import React, { useState } from "react";
import "./App.css";
import AppFooter from "./components/layout/AppFooter";
import AppHeader from "./components/layout/AppHeader";
import FormWrapper from "./components/FormPreprocess/FormWrapper";
import MembershipContext from "./Context/MembershipContext";
......@@ -11,17 +11,18 @@ const App = () => {
return (
<div className="App">
<AppHeader />
<MembershipContext.Provider value={{
currentUser,
setCurrentUser: (val) => setCurrentUser(val),
currentFormId,
setCurrentFormId: (val) => setCurrentFormId(val)
<MembershipContext.Provider
value={{
currentUser,
setCurrentUser: (val) => setCurrentUser(val),
currentFormId,
setCurrentFormId: (val) => setCurrentFormId(val),
}}>
<FormWrapper />
</MembershipContext.Provider>
<AppFooter />
</div>
);
}
};
export default App;
src/main/js/src/App.test.js
View file @ bed33609
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
import React from "react";
import { render } from "@testing-library/react";
import App from "./App";
test('renders ef copyright', () => {
test("renders ef copyright", () => {
const { getByText } = render(<App />);
const copyright = getByText(
/Copyright © Eclipse Foundation, Inc. All Rights Reserved./i
......
src/main/js/src/Constants/Constants.js
View file @ bed33609
// list all constants here
/**
* list all constants here
*
* The purpose of this file is try to avoid using strings directly everywhere,
* just hope to use consistant variables for strings.
*/
export const api_prefix = "http://localhost:8090";
export const api_prefix_form = "http://localhost:8090/form";
// The purpose of this file is try to avoid using strings directly everywhere, just hope to use consistant variables for strings
export const api_prefix = 'http://localhost:8090';
export const api_prefix_form = 'http://localhost:8090/form';
export const COMPANY_INFORMATION = 'Company Information';
export const MEMBERSHIP_LEVEL = 'Membership Level';
export const WORKING_GROUPS = 'Working Groups';
export const SIGNING_AUTHORITY = 'Signing Authority';
export const REVIEW = 'Review';
export const COMPANY_INFORMATION = "Company Information";
export const MEMBERSHIP_LEVEL = "Membership Level";
export const WORKING_GROUPS = "Working Groups";
export const SIGNING_AUTHORITY = "Signing Authority";
export const REVIEW = "Review";
export const FETCH_METHOD = {
POST: 'POST',
GET: 'GET',
PUT: 'PUT',
DELETE: 'DELETE'
}
POST: "POST",
GET: "GET",
PUT: "PUT",
DELETE: "DELETE",
};
export const FETCH_HEADER = {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
"Content-Type": "application/json",
Accept: "application/json",
};
export const membership_levels = [
{ label: 'Select a level', value: '' },
{ label: 'Strategic Member', value: 'strategic' },
{ label: 'Contributing Member (formerly referred to as Solutions Members)', value: 'contributing' },
{ label: 'Associate Member', value: 'associate' }
]
{ label: "Select a level", value: "" },
{ label: "Strategic Member", value: "strategic" },
{
label: "Contributing Member (formerly referred to as Solutions Members)",
value: "contributing",
},
{ label: "Associate Member", value: "associate" },
];
export const fakeChildrenArray = [
{props: { label: COMPANY_INFORMATION }},
{props: { label: MEMBERSHIP_LEVEL }},
{props: { label: WORKING_GROUPS }},
{props: { label: SIGNING_AUTHORITY }},
{props: { label: REVIEW }}
]
{ props: { label: COMPANY_INFORMATION } },
{ props: { label: MEMBERSHIP_LEVEL } },
{ props: { label: WORKING_GROUPS } },
{ props: { label: SIGNING_AUTHORITY } },
{ props: { label: REVIEW } },
];
export const contact_type = {
COMPANY: 'COMPANY',
MARKETING: 'MARKETING',
ACCOUNTING: 'ACCOUNTING',
WORKING_GROUP: 'WORKING_GROUP'
}
COMPANY: "COMPANY",
MARKETING: "MARKETING",
ACCOUNTING: "ACCOUNTING",
WORKING_GROUP: "WORKING_GROUP",
};
export const end_point = {
organizations: 'organizations',
contacts: 'contacts',
working_groups: 'working_groups',
userinfo: 'userinfo'
}
organizations: "organizations",
contacts: "contacts",
working_groups: "working_groups",
userinfo: "userinfo",
};
// const for workingGroups string
export const workingGroups = 'workingGroups';
export const workingGroups = "workingGroups";
// const for companies string
export const companies = 'companies';
export const companies = "companies";
export const newForm_tempId = 'new';
export const newForm_tempId = "new";
export const MODE_REACT_ONLY = 'MODE_REACT_ONLY';
export const MODE_REACT_API = 'MODE_REACT_API';
export const MODE_REACT_ONLY = "MODE_REACT_ONLY";
export const MODE_REACT_API = "MODE_REACT_API";
export function getCurrentMode() {
// @todo: create some kind of configs for this
return MODE_REACT_ONLY;
/*
// @todo: need a better way to control this.
return MODE_REACT_ONLY;
/*
if (window.location.href.includes('http://localhost:3000')) {
return MODE_REACT_ONLY;
} else return MODE_REACT_API;
*/
}
\ No newline at end of file
}
src/main/js/src/Context/MembershipContext.js
View file @ bed33609
......@@ -2,17 +2,17 @@ import React from "react";
/**
* User and form Id context shared among the whole App
*
*
* For more about context, please refer to: https://reactjs.org/docs/context.html
*
* It is simliar to state, but you can export and import anywhere, no need to pass all the way down to the child component
* **/
*
* It is simliar to state, but you can export and import anywhere,
* no need to pass all the way down to the child component
*/
const MembershipContext = React.createContext({
currentUser: {},
setCurrentUser: () => {},
currentFormId: "",
setCurrentFormId: () => {}
currentUser: {},
setCurrentUser: () => {},
currentFormId: "",
setCurrentFormId: () => {},
});
export default MembershipContext
\ No newline at end of file
export default MembershipContext;
src/main/js/src/components/FormComponents/CompanyInformation/Company.js
View file @ bed33609
import React from 'react';
import CustomSelectWrapper from '../Inputs/CustomSelect/CustomSelectWrapper';
import DefaultSelect from '../Inputs/CustomSelect/DefaultSelect';
import CustomAsyncSelect from '../Inputs/CustomSelect/CustomAsyncSelect';
import Input from '../Inputs/Input';
import { formField } from '../formModels/formFieldModel';
import { companies } from '../../../Constants/Constants';
import React from "react";
import CustomSelectWrapper from "../Inputs/CustomSelect/CustomSelectWrapper";
import DefaultSelect from "../Inputs/CustomSelect/DefaultSelect";
import CustomAsyncSelect from "../Inputs/CustomSelect/CustomAsyncSelect";
import Input from "../Inputs/Input";
import { formField } from "../formModels/formFieldModel";
import { companies } from "../../../Constants/Constants";
/**
* - Render Oraganization selector (used React-Select)
* - Render Organization twitter, and address inputs, including Country selector (used React-Select and country-list library of updated correct country list names)
* **/
* Render Oraganization selector (used React-Select)
*
* Render Organization twitter, and address inputs,
* including Country selector (used React-Select
* and country-list library of updated
* correct country list names)
*/
const Company = () => {
const { organizationName, organizationTwitter, organizationAddress } = formField;
// get country list library and map as option pass to the React-Select
const countryList = require('country-list').getNames().map(item => ({ label: item, value: item }));
const {
organizationName,
organizationTwitter,
organizationAddress,
} = formField;
// get country list library and map as option pass to the React-Select
const countryList = require("country-list")
.getNames()
.map((item) => ({ label: item, value: item }));
return (
return (
<>
<h2 className="fw-600 h4" id={organizationName.name}> Organization <span className="orange-star">*</span> </h2>
<h2 className="fw-600 h4" id={organizationName.name}>
{" "}
Organization <span className="orange-star">*</span>{" "}
</h2>
<CustomSelectWrapper
name={organizationName.name}
ariaLabel={organizationName.name}
......@@ -27,23 +39,38 @@ const Company = () => {
/>
<div className="row">
<div className="col-md-8">
<Input name={organizationTwitter.name} labelName={organizationTwitter.label} placeholder={organizationTwitter.placeholder} />
<Input
name={organizationTwitter.name}
labelName={organizationTwitter.label}
placeholder={organizationTwitter.placeholder}
/>
</div>
</div>
<h4 className="fw-600">Address</h4>
<div className="row">
<div className="col-md-16">
<Input name={organizationAddress.street.name} labelName={organizationAddress.street.label} placeholder={organizationAddress.street.placeholder} requiredMark={true} />
</div>
<div className="col-md-8">
<Input name={organizationAddress.city.name} labelName={organizationAddress.city.label} placeholder={organizationAddress.city.placeholder} requiredMark={true} />
</div>
<div className="col-md-16">
<Input
name={organizationAddress.street.name}
labelName={organizationAddress.street.label}
placeholder={organizationAddress.street.placeholder}