Skip to content

Commit

Permalink
Refactor inputs to separate components
Browse files Browse the repository at this point in the history
  • Loading branch information
Philipp Kuhlmay committed Jul 17, 2023
1 parent 42f4dee commit 6fcc697
Show file tree
Hide file tree
Showing 17 changed files with 697 additions and 490 deletions.
109 changes: 40 additions & 69 deletions Build/Sources/components/SingleComponents/SingleAuthorComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUp, faArrowDown, faTrash } from '@fortawesome/free-solid-svg-icons'
import React from "react";
import InputComponent from "../forms/input/InputComponent";
import SelectComponent from "../forms/select/SelectComponent";

export const SingleAuthorComponent = (props) => {

Expand All @@ -23,74 +25,44 @@ export const SingleAuthorComponent = (props) => {

return (
<div className="mb-5">
<div className="mb-3 input-group">
{/*<label htmlFor="inputGroupSelect01"><span className="me-2"><FontAwesomeIcon icon="fa-solid fa-user" /></span>Author</label>*/}
<span className="input-group-text" id="basic-addon1">Author</span>
<input
type="text"
className="form-control"
placeholder="Author Name"
aria-label="Author Name"
aria-describedby="basic-addon1"
value={props.author.name}
onChange={(e) => {
updateAuthorHandler('name', e.target.value);
}}
/>
</div>
<div className="mb-3 input-group">
{/*<label htmlFor="role"><span className="me-2"><FontAwesomeIcon icon="fa-solid fa-user-tag" /></span>Role</label>*/}
<span className="input-group-text" id="basic-addon1">Role</span>
<select
className="form-select"
aria-label="Role"
id="role"
onChange={(e) => {
updateAuthorHandler('role', e.target.value);
}}
>
<option>Please choose the role</option>
{
roles.map((role, index) => {
return (
<option key={index} value={role}>{role}</option>
)
})
}
</select>
</div>
<div className="mb-3 input-group">
{/*<label htmlFor="inputGroupSelect01"><span className="me-2"><FontAwesomeIcon icon="fa-solid fa-envelope" /></span>E-Mail</label>*/}
<span className="input-group-text" id="basic-addon1">E-Mail</span>
<input
type="text"
id="email"
className="form-control"
placeholder="Author E-Mail"
aria-label="Author E-Mail"
aria-describedby="basic-addon1"
value={props.author.email}
onChange={(e) => {
updateAuthorHandler('email', e.target.value);
}}
/>
</div>
<div className="mb-3 input-group">
{/*<label htmlFor="inputGroupSelect01"><span className="me-2"><FontAwesomeIcon icon="fa-solid fa-building" /></span>Company</label>*/}
<span className="input-group-text" id="basic-addon1">Company</span>
<input
type="text"
id="company"
className="form-control"
placeholder="Company"
aria-label="Company"
aria-describedby="basic-addon1"
value={props.author.company}
onChange={(e) => {
updateAuthorHandler('company', e.target.value);
}}
/>
</div>
<InputComponent
label="Author"
type="text"
identifier="author"
initialValue={props.author.name}
validation={{ isRequired: true, minLength: 2 }}
onChange={(value) => {
updateAuthorHandler('name', value);
}}
/>
<SelectComponent
label="Role"
initialValue={props.author.role}
identifier="role"
options={roles}
defaultValue="Please choose the role"
onChange={(value) => {
updateAuthorHandler('role', value);
}}
/>
<InputComponent
label="E-Mail"
type="email"
identifier="email"
initialValue={props.author.email}
onChange={(value) => {
updateAuthorHandler('email', value);
}}
/>
<InputComponent
label="Company"
type="text"
identifier="company"
initialValue={props.author.company}
onChange={(value) => {
updateAuthorHandler('company', value);
}}
/>
<div className="d-flex author-actions">
<button
aria-label="Trash"
Expand All @@ -115,7 +87,6 @@ export const SingleAuthorComponent = (props) => {
onClick={() => props.moveAuthor(props.index, 1)}
disabled={props.index === props.authors.length - 1}
>

<FontAwesomeIcon icon={faArrowDown} />
</button>
</div>
Expand Down
147 changes: 59 additions & 88 deletions Build/Sources/components/SingleComponents/SingleModuleComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import { Fragment } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUp, faArrowDown, faTrash } from '@fortawesome/free-solid-svg-icons'
import React from "react";
import SelectComponent from "../forms/select/SelectComponent";
import TextareaComponent from "../forms/textarea/TextareaComponent";
import InputComponent from "../forms/input/InputComponent";

export const SingleModuleComponent = (props) => {

Expand All @@ -22,93 +25,62 @@ export const SingleModuleComponent = (props) => {
return (
<Fragment>
<div className="mb-5">
<div className="mb-2 input-group">
<input
type="text"
className="form-control"
placeholder="Module Name"
aria-label="Module Name"
aria-describedby="basic-addon1"
value={props.module.name}
onChange={(e) => {
updateModuleHandler('name', e.target.value);
}}
/>
<span className="input-group-text" id="basic-addon1">Name</span>
</div>
<div className="mb-2 input-group">
<input
type="text"
className="form-control"
placeholder="Module key"
aria-label="Module key"
aria-describedby="basic-addon1"
value={props.module.key}
onChange={(e) => {
updateModuleHandler('key', e.target.value);
}}
/>
<span className="input-group-text" id="basic-addon1">Key</span>
</div>
<div className="mb-2 input-group">
<textarea
type="text"
className="form-control"
id="exampleFormControlTextarea1"
placeholder="Please enter the description for this module"
value={props.module.description}
onChange={(e) => {
updateModuleHandler('description', e.target.value);
}}
rows="5" />
<span className="input-group-text" id="basic-addon1">Description</span>
</div>
<div className="mb-2 input-group">
<input
type="text"
className="form-control"
placeholder="Module tab label"
aria-label="Module tab label"
aria-describedby="basic-addon1"
value={props.module.tabLabel}
onChange={(e) => {
updateModuleHandler('tabLabel', e.target.value);
}}
/>
<span className="input-group-text" id="basic-addon1">Label</span>
</div>
<div className="mb-2 input-group">
<select
className="form-select"
aria-label="Mail module"
onChange={(e) => {
updateModuleHandler('mainModule', e.target.value);
}}
>
<option>Please choose the main module</option>
{
mainModules.map((module, index) => {
return (
<option key={index} value={module}>{module}</option>
)
})
}
</select>
<span className="input-group-text" id="basic-addon1">Main module</span>
</div>
<div className="mb-2 input-group">
<textarea
type="text"
className="form-control"
id="exampleFormControlTextarea1"
placeholder="Blog => edit, update, delete"
value={props.module.controllerActionsCachable}
onChange={(e) => {
updateModuleHandler('actions.controllerActionsCachable', e.target.value);
}}
rows="5" />
<span className="input-group-text" id="basic-addon1">Cachable controller actions</span>
</div>
<InputComponent
label="Name"
type="text"
identifier="name"
validation={{ isRequired: true, minLength: 2 }}
initialValue={props.module.name}
onChange={(value) => {
updateModuleHandler('name', value);
}}
/>
<InputComponent
label="Key"
type="text"
identifier="key"
initialValue={props.module.key}
onChange={(value) => {
updateModuleHandler('key', value);
}}
/>
<TextareaComponent
label="Description"
identifier="description"
initialValue={props.module.description}
onChange={(value) => {
updateModuleHandler('description', value);
}}
placeholder="Description"
/>
<InputComponent
label="Label"
type="text"
identifier="label"
initialValue={props.module.tabLabel}
onChange={(value) => {
updateModuleHandler('tabLabel', value);
}}
/>
<SelectComponent
label="Main module"
initialValue={props.module.mainModule}
identifier="mainModule"
options={mainModules}
defaultValue="Please choose the main module"
onChange={(value) => {
updateModuleHandler('mainModule', value);
}}
/>
<TextareaComponent
placeholder="Blog => edit, update, delete"
label="Cachable controller actions"
identifier="controllerActionsCachable"
initialValue={props.module.controllerActionsCachable}
onChange={(value) => {
updateModuleHandler('actions.controllerActionsCachable', value);
}}
/>
<div className="d-flex module-actions">
<button
role="button"
Expand Down Expand Up @@ -136,7 +108,6 @@ export const SingleModuleComponent = (props) => {
onClick={() => props.moveModule(props.index, 1)}
disabled={props.index === props.modules.length - 1}
>

<FontAwesomeIcon icon={faArrowDown} />
</button>
</div>
Expand Down
Loading

0 comments on commit 6fcc697

Please sign in to comment.