Skip to content

Commit

Permalink
Rename element form type store, Fix some styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@beque
beque committed Oct 11, 2023
1 parent 4689b6f commit 8d0679a
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 129 deletions.
2 changes: 1 addition & 1 deletion app/api/chemotion/element_form_type_api.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ class ElementFormTypeAPI < Grape::API
resource :element_form_types do
desc 'Index: List all element form types'
get do
present ElementFormType.all, with: Entities::ElementFormTypeEntity
present ElementFormType.order(:name), with: Entities::ElementFormTypeEntity
end

desc 'create a new element form type'
Expand Down
5 changes: 2 additions & 3 deletions app/assets/stylesheets/form-fields-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
.grouped-fields-row {
display: flex;
flex-wrap: wrap;
width: 99%;
width: 98%;
margin-bottom: 10px;
margin-right: 1%;
padding-left: 13px;
Expand Down Expand Up @@ -145,7 +145,7 @@
margin-right: 5px;
}
.grouped-fields-row.amount .form-group {
width: calc((100% / 3) - 3%);
width: calc((100% / 3) - 4%);
margin-right: 1%;
&:last-child {
margin-right: 0;
Expand Down Expand Up @@ -222,7 +222,6 @@ div[class^="grouped-fields-row cols-"] {
margin-top: 4px;
margin-bottom: 4px;
display: inline-block;
width: 20px;
}
.checkbox-visibility label {
font-weight: bold;
Expand Down
148 changes: 84 additions & 64 deletions app/packs/src/apps/admin/ElementFormType.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ import {
} from 'react-bootstrap';
import Select from 'react-select';
import JSONInput from 'react-json-editor-ajrm';
import ElementFormTypeEditorModal from 'src/components/elementFormTypes/ElementFormTypeEditorModal';
import { observer } from 'mobx-react';
import { StoreContext } from 'src/stores/mobx/RootStore';

const ElementFormType = () => {
const formEditorStore = useContext(StoreContext).formEditor;
const elementFormTypesStore = useContext(StoreContext).elementFormTypes;
let tbody = null;
const editTooltip = <Tooltip id="edit_tooltip">Edit Element form type</Tooltip>;
const jsonTooltip = <Tooltip id="json_tooltip">Edit JSON</Tooltip>;
const formTooltip = <Tooltip id="form_tooltip">Edit form fields</Tooltip>

const deletePopover = (id, name) => {
return (
Expand All @@ -32,63 +34,51 @@ const ElementFormType = () => {
}

useEffect(() => {
formEditorStore.load();
elementFormTypesStore.load();
}, []);

const openModal = (content, id) => {
formEditorStore.showAdminModal();
formEditorStore.changeAdminModalContent(content, id);
}

const fieldValue = (field, e) => {
switch (field) {
case 'name':
case 'description':
return e.target.value;
break;
case 'element_type':
return e.value;
break;
case 'enabled':
return e.target.checked;
break;
const openModal = (content, id, type) => {
if (content == 'form') {
elementFormTypesStore.showEditorModal(type, id);
} else {
elementFormTypesStore.showAdminModal();
elementFormTypesStore.changeAdminModalContent(content, id);
}
}

const onChange = (field) => (e) => {
let value = fieldValue(field, e);
let elementFormType = { ...formEditorStore.elementFormType }
elementFormType[field] = value;
formEditorStore.addElementFormTypeValues(elementFormType);
}

const saveElementFormType = () => {
formEditorStore.changeErrorMessage('Please type in a name and select an Element');
elementFormTypesStore.changeErrorMessage('Please type in a name and select an Element');

if (formEditorStore.elementFormType.name !== '' && formEditorStore.elementFormType.element_type !== '') {
if (formEditorStore.adminModalContent == 'edit-object') {
formEditorStore.updateElementFormType(formEditorStore.elementFormType);
if (elementFormTypesStore.elementFormType.name !== '' && elementFormTypesStore.elementFormType.element_type !== '') {
if (elementFormTypesStore.adminModalContent == 'add-object') {
elementFormTypesStore.createElementFormType(elementFormTypesStore.elementFormType);
} else {
formEditorStore.createElementFormType(formEditorStore.elementFormType);
elementFormTypesStore.updateElementFormType(elementFormTypesStore.elementFormType);
}

formEditorStore.handleAdminCancel();
formEditorStore.changeErrorMessage('')
elementFormTypesStore.handleAdminCancel();
elementFormTypesStore.changeErrorMessage('');
}
}

const deleteElementFormType = (id) => {
formEditorStore.deleteElementFormType(id);
elementFormTypesStore.deleteElementFormType(id);
}

const showErrorMessage = () => {
if (formEditorStore.errorMessage) {
return <Alert bsStyle="danger" className='element-form-type-alert'>{formEditorStore.errorMessage}</Alert>;
if (elementFormTypesStore.errorMessage) {
return <Alert bsStyle="danger" className='element-form-type-alert'>{elementFormTypesStore.errorMessage}</Alert>;
}
}

const showSuccessMessage = () => {
if (elementFormTypesStore.showSuccessMessage) {
return <Alert bsStyle="success" className='element-form-type-success'>Sucessfully saved</Alert>;
}
}

const modalTitleByContent = () => {
switch (formEditorStore.adminModalContent) {
switch (elementFormTypesStore.adminModalContent) {
case 'edit-object':
return 'Edit Element Form Type';
break;
Expand All @@ -98,27 +88,46 @@ const ElementFormType = () => {
case 'json':
return 'Edit json';
break;
case 'form':
return 'Edit form';
break;
}
}

const contentForm = () => {
switch (formEditorStore.adminModalContent) {
switch (elementFormTypesStore.adminModalContent) {
case 'edit-object':
case 'add-object':
return ElementFormTypeForm();
break;
case 'json':
return StructureJsonForm();
break;
case 'form':
return 'Edit form';
}
}

const fieldValue = (field, e) => {
switch (field) {
case 'name':
case 'description':
return e.target.value;
break;
case 'element_type':
return e.value;
break;
case 'enabled':
return e.target.checked;
break;
case 'structure':
return e.jsObject;
break;
}
}

const onChange = (field) => (e) => {
let value = fieldValue(field, e);
let elementFormType = { ...elementFormTypesStore.elementFormType }
elementFormType[field] = value;
elementFormTypesStore.addElementFormTypeValues(elementFormType);
}

const ElementFormTypeForm = () => {
const elementOptions = [
{ label: 'Sample', value: 'sample' },
Expand All @@ -129,13 +138,13 @@ const ElementFormType = () => {
<FormGroup controlId="formControlName">
<InputGroup className='element-form-type-group'>
<InputGroup.Addon className='element-form-type-label'>Name *</InputGroup.Addon>
<FormControl type="text" name="name" value={formEditorStore.elementFormType.name} onChange={onChange('name')} />
<FormControl type="text" name="name" value={elementFormTypesStore.elementFormType.name} onChange={onChange('name')} />
</InputGroup>
</FormGroup>
<FormGroup controlId="formControlDescription">
<InputGroup className='element-form-type-group'>
<InputGroup.Addon className='element-form-type-label'>Description</InputGroup.Addon>
<FormControl type="text" name="description" value={formEditorStore.elementFormType.description} onChange={onChange('description')} />
<FormControl type="text" name="description" value={elementFormTypesStore.elementFormType.description} onChange={onChange('description')} />
</InputGroup>
</FormGroup>
<FormGroup controlId="formControlElementType">
Expand All @@ -145,20 +154,20 @@ const ElementFormType = () => {
name="element_type"
options={elementOptions}
placeholder="Select Element"
value={formEditorStore.elementFormType.element_type}
value={elementFormTypesStore.elementFormType.element_type}
isClearable={true}
onChange={onChange('element_type')}
/>
</InputGroup>
</FormGroup>
<FormGroup controlId="formControlEnabled">
<Checkbox inline type="checkbox" name="enabled" checked={formEditorStore.elementFormType.enabled} onChange={onChange('enabled')}>Enable globally</Checkbox>
<Checkbox inline type="checkbox" name="enabled" checked={elementFormTypesStore.elementFormType.enabled} onChange={onChange('enabled')}>Enable globally</Checkbox>
</FormGroup>
<FormGroup>
<span>* Required</span>
</FormGroup>
<FormGroup>
<Button bsStyle="warning" onClick={formEditorStore.handleAdminCancel} >
<Button bsStyle="warning" onClick={elementFormTypesStore.handleAdminCancel} >
Cancel&nbsp;
</Button>
&nbsp;
Expand All @@ -175,24 +184,24 @@ const ElementFormType = () => {
return (
<Form horizontal className="input-form">
<FormGroup controlId="formControlName">
<InputGroup className='element-form-type-group'>
<InputGroup.Addon className='element-form-type-label'>Name</InputGroup.Addon>
<FormControl type="text" name="name" defaultValue={formEditorStore.elementFormType.name} readOnly />
</InputGroup>
<b>
Name:&nbsp;
{elementFormTypesStore.elementFormType.name}
</b>
</FormGroup>
<FormGroup controlId="formControlJson">
<JSONInput
placeholder={formEditorStore.elementFormType.structure}
placeholder={elementFormTypesStore.elementFormType.structure}
width="100%"
onChange={onChange('structure')}
/>
</FormGroup>
<FormGroup>
<Button bsStyle="warning" onClick={formEditorStore.handleAdminCancel} >
<Button bsStyle="warning" onClick={elementFormTypesStore.handleAdminCancel} >
Cancel&nbsp;
</Button>
&nbsp;
<Button bsStyle="primary" onClick={saveElementFormType()} >
<Button bsStyle="primary" onClick={() => saveElementFormType()} >
Save&nbsp;
<i className="fa fa-save" />
</Button>
Expand All @@ -203,7 +212,7 @@ const ElementFormType = () => {

const renderModal = () => {
return (
<Modal show={formEditorStore.adminModalVisible} onHide={formEditorStore.handleAdminCancel}>
<Modal show={elementFormTypesStore.adminModalVisible} onHide={elementFormTypesStore.handleAdminCancel}>
<Modal.Header closeButton><Modal.Title>{modalTitleByContent()}</Modal.Title></Modal.Header>
<Modal.Body style={{ overflow: 'auto' }}>
<div className="col-md-12">
Expand All @@ -216,8 +225,8 @@ const ElementFormType = () => {
}

const renderList = () => {
if (formEditorStore.elementFormTypes.length >= 1) {
tbody = Object.values(formEditorStore.elementFormTypes).map((row, i) => {
if (elementFormTypesStore.elementFormTypes.length >= 1) {
tbody = Object.values(elementFormTypesStore.elementFormTypes).map((row, i) => {
return (
<tbody key={`tbody_${row.id}`}>
<tr key={`row_${row.id}`} id={`row_${row.id}`} style={{ fontWeight: 'bold' }}>
Expand All @@ -227,22 +236,31 @@ const ElementFormType = () => {
<Button
bsSize="xsmall"
bsStyle="info"
onClick={() => openModal('edit-object', row.id)}
onClick={() => openModal('edit-object', row.id, row.element_type)}
>
<i className="fa fa-pencil-square-o" />
</Button>
</OverlayTrigger>
&nbsp;
<OverlayTrigger placement="bottom" overlay={jsonTooltip} >
<OverlayTrigger placement="bottom" overlay={formTooltip} >
<Button
bsSize="xsmall"
bsStyle="warning"
onClick={() => openModal('json', row.id)}
bsStyle="primary"
onClick={() => openModal('form', row.id, row.element_type)}
>
<i className="fa fa-cog" />
</Button>
</OverlayTrigger>
&nbsp;
<OverlayTrigger placement="bottom" overlay={jsonTooltip} >
<Button
bsSize="xsmall"
onClick={() => openModal('json', row.id, row.element_type)}
>
<i className="fa fa-code" />
</Button>
</OverlayTrigger>
&nbsp;
<OverlayTrigger
placement="bottom"
overlay={deletePopover(row.id, row.name)}
Expand Down Expand Up @@ -272,20 +290,22 @@ const ElementFormType = () => {
New Element Form Type&nbsp;
<i className="fa fa-plus" />
</Button>
{showSuccessMessage()}
<Table responsive condensed hover>
<thead>
<tr style={{ backgroundColor: '#ddd' }}>
<th width="5%">#</th>
<th width="10%">Actions</th>
<th width="15%">Actions</th>
<th width="5%">ID</th>
<th width="30%">Name</th>
<th width="40%">Description</th>
<th width="35%">Description</th>
<th width="10%">Enabled</th>
</tr>
</thead>
{renderList()}
</Table>
{renderModal()}
<ElementFormTypeEditorModal />
</>
);
};
Expand Down
Loading

0 comments on commit 8d0679a

Please sign in to comment.