From e4bbd267d79c061ac44c2077a4fb23c975cd0ab8 Mon Sep 17 00:00:00 2001 From: Beate Quednau Date: Fri, 6 Oct 2023 18:17:10 +0200 Subject: [PATCH] Add element form type model, admin area --- app/api/api.rb | 1 + app/api/chemotion/element_form_type_api.rb | 72 ++++ app/api/entities/element_form_type_entity.rb | 16 + app/assets/stylesheets/form-fields-modal.scss | 16 + app/models/element_form_type.rb | 5 + app/packs/src/apps/admin/AdminHome.js | 17 +- app/packs/src/apps/admin/ElementFormType.js | 293 +++++++++++++++ .../src/fetchers/ElementFormTypesFetcher.js | 60 ++++ app/packs/src/stores/mobx/FormEditorStore.jsx | 89 ++++- ...0231002153808_create_element_form_types.rb | 15 + db/schema.rb | 336 ++++++++++-------- spec/models/element_form_type_spec.rb | 4 + 12 files changed, 773 insertions(+), 151 deletions(-) create mode 100644 app/api/chemotion/element_form_type_api.rb create mode 100644 app/api/entities/element_form_type_entity.rb create mode 100644 app/models/element_form_type.rb create mode 100644 app/packs/src/apps/admin/ElementFormType.js create mode 100644 app/packs/src/fetchers/ElementFormTypesFetcher.js create mode 100644 db/migrate/20231002153808_create_element_form_types.rb create mode 100644 spec/models/element_form_type_spec.rb diff --git a/app/api/api.rb b/app/api/api.rb index 5df80b391c..18fe145845 100644 --- a/app/api/api.rb +++ b/app/api/api.rb @@ -183,6 +183,7 @@ def to_json_camel_case(val) mount Labimotion::GenericDatasetAPI mount Labimotion::SegmentAPI mount Labimotion::LabimotionHubAPI + mount Chemotion::ElementFormTypeAPI if Rails.env.development? add_swagger_documentation(info: { diff --git a/app/api/chemotion/element_form_type_api.rb b/app/api/chemotion/element_form_type_api.rb new file mode 100644 index 0000000000..c4bdc98c13 --- /dev/null +++ b/app/api/chemotion/element_form_type_api.rb @@ -0,0 +1,72 @@ +# frozen_string_literal: true + +module Chemotion + class ElementFormTypeAPI < Grape::API + resource :element_form_types do + desc 'Index: List all element form types' + get do + present ElementFormType.all, with: Entities::ElementFormTypeEntity + end + + desc 'create a new element form type' + params do + requires :name, type: String + optional :description, type: String + requires :element_type, type: String, values: %w[sample reaction wellplate screen] + optional :enabled, type: Boolean + end + post do + element_form_type = + ElementFormType.create!( + creator: current_user, + name: params[:name], + description: params[:description], + element_type: params[:element_type], + enabled: params[:enabled], + ) + present element_form_type, with: Entities::ElementFormTypeEntity + end + + desc 'get element form type by id' + params do + requires :id, type: Integer, desc: 'element form type id' + end + route_param :id do + get do + present ElementFormType.find_by(id: params[:id]), with: Entities::ElementFormTypeEntity + end + end + + desc 'update a element form type' + params do + optional :id, type: Integer + optional :name, type: String + optional :description, type: String + optional :element_type, type: String, values: %w[sample reaction wellplate screen] + optional :enabled, type: Boolean + optional :structure, type: Hash + end + put ':id' do + element_form_type = ElementFormType.find_by(id: params[:id]) + element_form_type.update!( + name: params[:name], + description: params[:description], + element_type: params[:element_type], + enabled: params[:enabled], + structure: params[:structure], + ) + present element_form_type, with: Entities::ElementFormTypeEntity + end + + desc 'update a element form type' + delete ':id' do + element_form_type = ElementFormType.find_by(id: params[:id]) + unless element_form_type.present? && element_form_type.destroy + error!('element form type could not be deleted', 400) + end + + { deleted: element_form_type.id } + end + end + end +end diff --git a/app/api/entities/element_form_type_entity.rb b/app/api/entities/element_form_type_entity.rb new file mode 100644 index 0000000000..1fadd8f59f --- /dev/null +++ b/app/api/entities/element_form_type_entity.rb @@ -0,0 +1,16 @@ +# frozen_string_literal: true + +module Entities + class ElementFormTypeEntity < ApplicationEntity + root :element_form_types # root key when rendering a list of element form types + + expose :id + expose :name + expose :description + expose :element_type + expose :structure, default: {} + expose :enabled + + # expose_timestamps + end +end diff --git a/app/assets/stylesheets/form-fields-modal.scss b/app/assets/stylesheets/form-fields-modal.scss index bcbf92f58a..fd9793b9fe 100644 --- a/app/assets/stylesheets/form-fields-modal.scss +++ b/app/assets/stylesheets/form-fields-modal.scss @@ -302,3 +302,19 @@ div[class^="grouped-fields-row cols-"] { .glyphicon.glyphicon-info-sign.with-padding { padding-left: 5px; } + +button.element-form-type-add-button { + margin-bottom: 15px; +} + +.element-form-type-group.input-group { + width: 100%; +} +.element-form-type-label.input-group-addon { + width: 18%; + text-align: left; +} +.element-form-type-alert { + margin-left: -15px; + margin-right: -15px; +} \ No newline at end of file diff --git a/app/models/element_form_type.rb b/app/models/element_form_type.rb new file mode 100644 index 0000000000..a7264fd521 --- /dev/null +++ b/app/models/element_form_type.rb @@ -0,0 +1,5 @@ +# frozen_string_literal: true + +class ElementFormType < ApplicationRecord + belongs_to :creator, class_name: 'User' +end diff --git a/app/packs/src/apps/admin/AdminHome.js b/app/packs/src/apps/admin/AdminHome.js index 80ddfaa8e0..f30d0e47a7 100644 --- a/app/packs/src/apps/admin/AdminHome.js +++ b/app/packs/src/apps/admin/AdminHome.js @@ -12,6 +12,7 @@ import NovncSettings from 'src/apps/admin/NovncSettings'; import MatrixManagement from 'src/apps/admin/MatrixManagement'; import TextTemplateContainer from 'src/apps/admin/textTemplates/TextTemplateContainer'; import DelayedJobs from 'src/apps/admin/DelayedJobs'; +import ElementFormType from 'src/apps/admin/ElementFormType'; // import TemplateManagement from 'src/apps/admin/TemplateManagement'; class AdminHome extends React.Component { @@ -65,6 +66,8 @@ class AdminHome extends React.Component { return this.renderTemplateManagement(); } else if (pageIndex === 13) { return this.renderDelayedJobs(); + } else if (pageIndex === 14) { + return this.renderElementFormTypes(); } return (
); } @@ -88,8 +91,9 @@ class AdminHome extends React.Component { Text Templates Message Publish Load OLS Terms - {/* Report-template Management */} - Delayed Jobs + {/* Report-template Management */} + Delayed Jobs + Element Form Types
@@ -195,6 +199,15 @@ class AdminHome extends React.Component { ); } + renderElementFormTypes() { + const { contentClassName } = this.state; + return ( + + + + ); + } + render() { return (
diff --git a/app/packs/src/apps/admin/ElementFormType.js b/app/packs/src/apps/admin/ElementFormType.js new file mode 100644 index 0000000000..3c73a8a54e --- /dev/null +++ b/app/packs/src/apps/admin/ElementFormType.js @@ -0,0 +1,293 @@ +import React, { useContext, useEffect } from 'react'; +import { + Table, Button, Modal, Form, FormGroup, InputGroup, FormControl, + Checkbox, OverlayTrigger, Tooltip, Popover, Alert +} from 'react-bootstrap'; +import Select from 'react-select'; +import JSONInput from 'react-json-editor-ajrm'; +import { observer } from 'mobx-react'; +import { StoreContext } from 'src/stores/mobx/RootStore'; + +const ElementFormType = () => { + const formEditorStore = useContext(StoreContext).formEditor; + let tbody = null; + const editTooltip = Edit Element form type; + const jsonTooltip = Edit JSON; + + const deletePopover = (id, name) => { + return ( + + Delete {name}
+
+ +    + +
+ + ); + } + + useEffect(() => { + formEditorStore.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 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'); + + if (formEditorStore.elementFormType.name !== '' && formEditorStore.elementFormType.element_type !== '') { + if (formEditorStore.adminModalContent == 'edit-object') { + formEditorStore.updateElementFormType(formEditorStore.elementFormType); + } else { + formEditorStore.createElementFormType(formEditorStore.elementFormType); + } + + formEditorStore.handleAdminCancel(); + formEditorStore.changeErrorMessage('') + } + } + + const deleteElementFormType = (id) => { + formEditorStore.deleteElementFormType(id); + } + + const showErrorMessage = () => { + if (formEditorStore.errorMessage) { + return {formEditorStore.errorMessage}; + } + } + + const modalTitleByContent = () => { + switch (formEditorStore.adminModalContent) { + case 'edit-object': + return 'Edit Element Form Type'; + break; + case 'add-object': + return 'Add new Element Form Type'; + break; + case 'json': + return 'Edit json'; + break; + case 'form': + return 'Edit form'; + break; + } + } + + const contentForm = () => { + switch (formEditorStore.adminModalContent) { + case 'edit-object': + case 'add-object': + return ElementFormTypeForm(); + break; + case 'json': + return StructureJsonForm(); + break; + case 'form': + return 'Edit form'; + break; + } + } + + const ElementFormTypeForm = () => { + const elementOptions = [ + { label: 'Sample', value: 'sample' }, + ]; + + return ( +
+ + + Name * + + + + + + Description + + + + + + Element * +