Skip to content

Commit

Permalink
Refactor edit views
Browse files Browse the repository at this point in the history
  • Loading branch information
@jochenklar
jochenklar committed Mar 28, 2023
1 parent 3849b42 commit 0ecdbbc
Show file tree
Hide file tree
Showing 12 changed files with 411 additions and 394 deletions.
21 changes: 9 additions & 12 deletions rdmo/management/assets/js/components/edit/EditAttribute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,16 @@ const EditAttribute = ({ config, attribute, elements, elementActions }) => {
<Text config={config} element={attribute} field="key"
onChange={updateAttribute} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={attribute} field="comment"
rows={4} onChange={updateAttribute} />
</div>
<div className="col-sm-12">
<Checkbox config={config} element={attribute} field="locked"
onChange={updateAttribute} />
</div>
<div className="col-sm-12">
<Select config={config} element={attribute} field="parent"
options={attributes} onChange={updateAttribute} />
</div>
</div>

<Textarea config={config} element={attribute} field="comment"
rows={4} onChange={updateAttribute} />

<Checkbox config={config} element={attribute} field="locked"
onChange={updateAttribute} />

<Select config={config} element={attribute} field="parent"
options={attributes} onChange={updateAttribute} />
</div>

<div className="panel-footer">
Expand Down
62 changes: 32 additions & 30 deletions rdmo/management/assets/js/components/edit/EditCatalog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
import { Tabs, Tab } from 'react-bootstrap';

import Checkbox from '../forms/Checkbox'
import Number from '../forms/Number'
import OrderedMultiSelect from '../forms/OrderedMultiSelect'
import Select from '../forms/Select'
import Text from '../forms/Text'
Expand Down Expand Up @@ -59,43 +60,44 @@ const EditCatalog = ({ config, catalog, elements, elementActions }) => {
<div className="col-sm-6">
<Text config={config} element={catalog} field="uri_path" onChange={updateCatalog} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={catalog} field="comment" rows={4} onChange={updateCatalog} />
</div>
<div className="col-sm-6">
</div>
<Textarea config={config} element={catalog} field="comment" rows={4} onChange={updateCatalog} />
<div className="row">
<div className="col-sm-4">
<Checkbox config={config} element={catalog} field="locked" onChange={updateCatalog} />
</div>
<div className="col-sm-6">
<div className="col-sm-4">
<Checkbox config={config} element={catalog} field="available" onChange={updateCatalog} />
</div>
<div className="col-sm-12">
<OrderedMultiSelect config={config} element={catalog} field="sections"
options={sections} verboseName="section"
onChange={updateCatalog} onCreate={createSection} />
<div className="col-sm-4">
<Number config={config} element={catalog} field="order" onChange={updateCatalog} />
</div>
<div className="col-sm-12">
<Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => {
return (
<Tab className="pt-10" key={index} eventKey={index} title={lang}>
<Text config={config} element={catalog} field={`title_${lang_code }`}
onChange={updateCatalog} />
<Textarea config={config} element={catalog} field={`help_${lang_code }`}
rows={4} onChange={updateCatalog} />
</Tab>
)
})
}
<Tab className="pt-10" eventKey={config.settings.languages.length + 1} title={gettext('Visibility')}>
<Select config={config} element={catalog} field="groups"
options={groups} onChange={updateCatalog} />
<Select config={config} element={catalog} field="sites"
options={sites} onChange={updateCatalog} />
</Tab>
</Tabs>
</div>
<div className="row">
<div className="col-sm-6">
<Select config={config} element={catalog} field="groups"
options={groups} onChange={updateCatalog} />
</div>
<div className="col-sm-6">
<Select config={config} element={catalog} field="sites"
options={sites} onChange={updateCatalog} />
</div>
</div>
<Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => (
<Tab key={index} eventKey={index} title={lang}>
<Text config={config} element={catalog} field={`title_${lang_code }`}
onChange={updateCatalog} />
<Textarea config={config} element={catalog} field={`help_${lang_code }`}
rows={4} onChange={updateCatalog} />
</Tab>
))
}
</Tabs>
<OrderedMultiSelect config={config} element={catalog} field="sections"
options={sections} verboseName="section"
onChange={updateCatalog} onCreate={createSection} />
</div>

<div className="panel-footer">
Expand Down
20 changes: 12 additions & 8 deletions rdmo/management/assets/js/components/edit/EditCondition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,15 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
<Text config={config} element={condition} field="key"
onChange={updateCondition} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={condition} field="comment"
rows={4} onChange={updateCondition} />
</div>
<div className="col-sm-12">
<Checkbox config={config} element={condition} field="locked"
onChange={updateCondition} />
</div>
</div>

<Textarea config={config} element={condition} field="comment"
rows={4} onChange={updateCondition} />

<Checkbox config={config} element={condition} field="locked"
onChange={updateCondition} />

<div className="row">
<div className="col-sm-6">
<Select config={config} element={condition} field="source"
options={attributes} onChange={updateCondition} />
Expand All @@ -75,6 +76,9 @@ const EditCondition = ({ config, condition, elements, elementActions }) => {
<Select config={config} element={condition} field="relation"
options={relations} onChange={updateCondition} />
</div>
</div>

<div className="row">
<div className="col-sm-6">
<Text config={config} element={condition} field="target_text"
onChange={updateCondition} />
Expand Down
43 changes: 21 additions & 22 deletions rdmo/management/assets/js/components/edit/EditOption.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,10 +68,12 @@ const EditOption = ({ config, option, elements, elementActions }) => {
<Text config={config} element={option} field="uri_path"
onChange={updateOption} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={option} field="comment"
rows={4} onChange={updateOption} />
</div>
</div>

<Textarea config={config} element={option} field="comment"
rows={4} onChange={updateOption} />

<div className="row">
<div className="col-sm-6">
<Checkbox config={config} element={option} field="locked"
onChange={updateOption} />
Expand All @@ -80,25 +82,22 @@ const EditOption = ({ config, option, elements, elementActions }) => {
<Checkbox config={config} element={option} field="additional_input"
onChange={updateOption} />
</div>
<div className="col-sm-12">
<Tabs id="#option-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => {
return (
<Tab className="pt-10" key={index} eventKey={index} title={lang}>
<div className="row">
<div className="col-sm-12">
<Text config={config} element={option} field={`text_${lang_code }`}
onChange={updateOption} />
</div>
</div>
</Tab>
)
})
}
</Tabs>
</div>
</div>

<Tabs id="#option-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => (
<Tab key={index} eventKey={index} title={lang}>
<div className="row">
<div className="col-sm-12">
<Text config={config} element={option} field={`text_${lang_code }`}
onChange={updateOption} />
</div>
</div>
</Tab>
))
}
</Tabs>
</div>

<div className="panel-footer">
Expand Down
26 changes: 13 additions & 13 deletions rdmo/management/assets/js/components/edit/EditOptionSet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
const updateOptionSet = (key, value) => elementActions.updateElement(optionset, {[key]: value})
const storeOptionSet = (back) => elementActions.storeElement('optionsets', optionset, back)
const deleteOptionSet = () => elementActions.deleteElement('optionsets', optionset)
const createOption = () => elementActions.createElement('options', { optionset })

const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()

Expand Down Expand Up @@ -63,10 +64,12 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
<Text config={config} element={optionset} field="uri_path"
onChange={updateOptionSet} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={optionset} field="comment"
rows={4} onChange={updateOptionSet} />
</div>
</div>

<Textarea config={config} element={optionset} field="comment"
rows={4} onChange={updateOptionSet} />

<div className="row">
<div className="col-sm-6">
<Checkbox config={config} element={optionset} field="locked"
onChange={updateOptionSet} />
Expand All @@ -75,16 +78,13 @@ const EditOptionSet = ({ config, optionset, elements, elementActions }) => {
<Number config={config} element={optionset} field="order"
onChange={updateOptionSet} />
</div>
<div className="col-sm-12">
<OrderedMultiSelect config={config} element={optionset} field="options"
options={options} verboseName="option"
onChange={updateOptionSet} />
</div>
<div className="col-sm-12">
<Select config={config} element={optionset} field="provider_key"
options={providers} onChange={updateOptionSet} />
</div>
</div>

<OrderedMultiSelect config={config} element={optionset} field="options"
options={options} verboseName="option"
onChange={updateOptionSet} onCreate={createOption} />
<Select config={config} element={optionset} field="provider_key"
options={providers} onChange={updateOptionSet} />
</div>

<div className="panel-footer">
Expand Down
96 changes: 47 additions & 49 deletions rdmo/management/assets/js/components/edit/EditPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ const EditPage = ({ config, page, elements, elementActions }) => {
}
const storePage = (back) => elementActions.storeElement('pages', page, back)
const deletePage = () => elementActions.deleteElement('pages', page)
const createQuestionSet = () => elementActions.createElement('questionsets', { page })
const createQuestion = () => elementActions.createElement('questions', { page })

const [showDeleteModal, openDeleteModal, closeDeleteModal] = useDeleteModal()

Expand Down Expand Up @@ -89,10 +91,12 @@ const EditPage = ({ config, page, elements, elementActions }) => {
<Text config={config} element={page} field="uri_path"
onChange={updatePage} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={page} field="comment"
rows={4} onChange={updatePage} />
</div>
</div>

<Textarea config={config} element={page} field="comment"
rows={4} onChange={updatePage} />

<div className="row">
<div className="col-sm-6">
<Checkbox config={config} element={page} field="locked"
onChange={updatePage} />
Expand All @@ -101,52 +105,46 @@ const EditPage = ({ config, page, elements, elementActions }) => {
<Checkbox config={config} element={page} field="is_collection"
onChange={updatePage} />
</div>
<div className="col-sm-12">
<Select config={config} element={page} field="attribute"
options={attributes} onChange={updatePage} />
</div>
<div className="col-sm-12">
<OrderedMultiSelect config={config} element={page} field="elements"
values={elementValues} options={elementOptions}
verboseName={gettext('element')}
onChange={updatePage} />
</div>
<div className="col-sm-12">
<MultiSelect config={config} element={page} field="conditions"
options={conditions} verboseName="condition"
onChange={updatePage} />
</div>
<div className="col-sm-12">
<Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => {
return (
<Tab className="pt-10" key={index} eventKey={index} title={lang}>
<div className="row">
<div className="col-sm-12">
<Text config={config} element={page} field={`title_${lang_code }`}
onChange={updatePage} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={page} field={`help_${lang_code }`}
rows={4} onChange={updatePage} />
</div>
<div className="col-sm-6">
<Text config={config} element={page} field={`verbose_name_${lang_code }`}
onChange={updatePage} />
</div>
<div className="col-sm-6">
<Text config={config} element={page} field={`verbose_name_plural_${lang_code }`}
onChange={updatePage} />
</div>
</div>
</Tab>
)
})
}
</Tabs>
</div>
</div>

<Tabs id="#catalog-tabs" defaultActiveKey={0} animation={false}>
{
config.settings && config.settings.languages.map(([lang_code, lang], index) => (
<Tab key={index} eventKey={index} title={lang}>
<div className="row">
<div className="col-sm-12">
<Text config={config} element={page} field={`title_${lang_code }`}
onChange={updatePage} />
</div>
<div className="col-sm-12">
<Textarea config={config} element={page} field={`help_${lang_code }`}
rows={4} onChange={updatePage} />
</div>
<div className="col-sm-6">
<Text config={config} element={page} field={`verbose_name_${lang_code }`}
onChange={updatePage} />
</div>
<div className="col-sm-6">
<Text config={config} element={page} field={`verbose_name_plural_${lang_code }`}
onChange={updatePage} />
</div>
</div>
</Tab>
))
}
</Tabs>

<Select config={config} element={page} field="attribute"
options={attributes} onChange={updatePage} />

<OrderedMultiSelect config={config} element={page} field="elements"
values={elementValues} options={elementOptions}
verboseName={gettext('element')}
onChange={updatePage} />

<MultiSelect config={config} element={page} field="conditions"
options={conditions} verboseName="condition"
onChange={updatePage} />
</div>

<div className="panel-footer">
Expand Down

0 comments on commit 0ecdbbc

Please sign in to comment.