3.0.0 management

package.json

@@ -5,7 +5,7 @@
     "build:prod": "webpack --config webpack.config.js --mode production",
     "build": "webpack --config webpack.config.js --mode development",
     "watch": "webpack --config webpack.config.js --mode development --watch",
-    "lint": "eslint --ext .js rdmo/"
+    "lint": "eslint rdmo/**/*.js"
   },
   "author": "RDMO Arbeitsgemeinschaft <rdmorganiser.github.io>",
   "license": "Apache-2.0",

rdmo/core/assets/js/components/Html.js

@@ -5,7 +5,7 @@ import { isEmpty } from 'lodash'
 import { executeScriptTags } from 'rdmo/core/assets/js/utils/meta'
 
 
-const Html = ({ id = null, html = '' }) => {
+const Html = ({ id = null, className = '', html = '' }) => {
   const ref = useRef()
 
   // if html contains a <script> tag, and settings.TEMPLATES_EXECUTE_SCRIPT_TAGS is True,
@@ -27,12 +27,13 @@ const Html = ({ id = null, html = '' }) => {
   }
 
   return !isEmpty(html) && (
-    <span ref={ref} id={id} dangerouslySetInnerHTML={{ __html: html }} />
+    <span ref={ref} id={id} className={className} dangerouslySetInnerHTML={{ __html: html }} />
   )
 }
 
 Html.propTypes = {
   id: PropTypes.string,
+  className: PropTypes.string,
   html: PropTypes.string
 }
 

rdmo/core/assets/js/components/Input.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, uniqueId } from 'lodash'
+
+const Input = ({ type = 'text', className, label, placeholder, help, disabled, errors, value, onChange }) => {
+  const id = uniqueId('input-')
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <input
+        id={id}
+        type={type}
+        className={classNames('form-control', {
+          'is-invalid': !isEmpty(errors)
+        })}
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={event => onChange(event.target.value)}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Input.propTypes = {
+  type: PropTypes.string,
+  className: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.string,
+  disabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Input

rdmo/core/assets/js/components/InputDebounced.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useDebouncedCallback } from 'use-debounce'
+
+import Input from './Input'
+
+const InputDebounced = ({ value, onChange, ...props }) => {
+
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => setInputValue(value), [value])
+
+  const debouncedOnChange = useDebouncedCallback((value) => onChange(value), 500)
+
+  return (
+    <Input {...props}
+      value={inputValue}
+      onChange={(value) => {
+        setInputValue(value)
+        debouncedOnChange(value)
+      }}
+    />
+  )
+}
+
+InputDebounced.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default InputDebounced

rdmo/core/assets/js/components/Textarea.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+import { isEmpty, uniqueId } from 'lodash'
+
+const Textarea = ({ rows, className, label, placeholder, help, disabled, errors, value, onChange }) => {
+  const id = uniqueId('input-')
+
+  return (
+    <div className={classNames('form-group', className)}>
+      <label className="control-label" htmlFor={id}>{label}</label>
+
+      <textarea
+        rows={rows}
+        id={id}
+        className={classNames('form-control', {
+          'is-invalid': !isEmpty(errors)
+        })}
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={event => onChange(event.target.value)}
+      />
+      {
+        errors && (
+          <div className="invalid-feedback">
+            {errors.map((error, index) => <div key={index}>{error}</div>)}
+          </div>
+        )
+      }
+      {
+        help && <div className="form-text">{help}</div>
+      }
+    </div>
+  )
+}
+
+Textarea.propTypes = {
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  help: PropTypes.string,
+  disabled: PropTypes.bool,
+  errors: PropTypes.array,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default Textarea

rdmo/core/assets/js/components/TextareaDebounced.js

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+
+import { useDebouncedCallback } from 'use-debounce'
+
+import Textarea from './Textarea'
+
+const TextareaDebounced = ({ value, onChange, ...props }) => {
+
+  const [inputValue, setInputValue] = useState('')
+
+  useEffect(() => setInputValue(value), [value])
+
+  const debouncedOnChange = useDebouncedCallback((value) => onChange(value), 500)
+
+  return (
+    <Textarea {...props}
+      value={inputValue}
+      onChange={(value) => {
+        setInputValue(value)
+        debouncedOnChange(value)
+      }}
+    />
+  )
+}
+
+TextareaDebounced.propTypes = {
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired
+}
+
+export default TextareaDebounced

rdmo/core/assets/scss/_bs53/base.scss

@@ -1,3 +1,4 @@
+@import 'base/code';
 @import 'base/content';
 @import 'base/dropdown';
 @import 'base/forms';

rdmo/core/assets/scss/_bs53/base/code.scss

@@ -0,0 +1,59 @@
+code {
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--bs-border-radius);
+
+    font-size: 0.85rem;
+
+    word-wrap: break-word;
+
+    &.code-questions {
+        color: rgb(16, 31, 112);
+        background-color: rgba(16, 31, 112, 0.1);
+    }
+    &.code-domain {
+        color: rgb(199, 37, 78);
+        background-color: rgb(249, 242, 244);
+    }
+    &.code-options {
+        color: rgb(255, 100, 0);
+        background-color: rgba(255, 100, 0, 0.1);
+    }
+    &.code-options-provider {
+        color: white;
+        background-color: rgba(255, 100, 0, 0.8);
+    }
+    &.code-conditions {
+        color: rgb(128, 0, 128);
+        background-color: rgba(128, 0, 128, 0.1);
+    }
+    &.code-tasks {
+        color: rgb(128, 0, 0);
+        background-color: rgba(128, 0, 0, 0.1);
+    }
+    &.code-views {
+        color: rgb(0, 128, 0);
+        background-color: rgba(0, 128, 0, 0.1);
+    }
+    &.code-order {
+        color: rgb(96, 96, 96);
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+    &.code-default {
+        color: rgb(96, 96, 96);
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+    &.code-optional {
+        color: white;
+        background-color: rgb(119.085, 119.085, 119.085);
+    }
+    &.code-import {
+        color: black;
+        background-color: rgba(96, 96, 96, 0.1);
+    }
+}
+
+a:hover {
+    code {
+        text-decoration: underline;
+    }
+}

rdmo/core/assets/scss/_bs53/base/typography.scss

@@ -68,3 +68,27 @@ button.unstyled {
     --bs-btn-hover-bg: var(--rdmo-color-link-hover);
     --bs-btn-hover-border-color: var(--rdmo-color-link-hover);
 }
+
+.btn-outline-primary {
+    --bs-btn-color: var(--rdmo-color-link);
+    --bs-btn-border-color: var(--rdmo-color-link);
+    --bs-btn-hover-bg: var(--rdmo-color-link-hover);
+    --bs-btn-hover-border-color: var(--rdmo-color-link-hover);
+    --bs-btn-active-bg: var(--rdmo-color-link-hover);
+    --bs-btn-active-border-color: var(--rdmo-color-link-hover);
+}
+
+.bi {
+    font-weight: bold;
+    -webkit-text-stroke: 0.5px currentColor;
+
+    &.disabled,
+    &:disabled {
+        color: var(--bs-secondary-color) !important;
+        cursor: not-allowed !important;
+    }
+}
+
+.cursor-pointer {
+    cursor: pointer;
+}

rdmo/core/assets/scss/_bs53/bootstrap.scss

@@ -4,4 +4,5 @@ $bootstrap-icons-font-dir: '~bootstrap-icons/font/fonts';
 @import '~bootstrap-icons/font/bootstrap-icons.scss';
 
 @import '@fontsource/open-sans/index.css';
+@import '@fontsource/open-sans/700.css';
 @import '@fontsource/roboto-slab/index.css';

rdmo/core/serializers.py

@@ -194,9 +194,13 @@ def get_model(self, obj) -> str:
 class ElementWarningSerializerMixin(serializers.ModelSerializer):
 
     def get_warning(self, obj) -> str:
-        return {
-            'missing_languages': any(get_language_warning(obj, field_name) for field_name in self.Meta.warning_fields)
-        }
+        missing_languages = any(get_language_warning(obj, field_name) for field_name in self.Meta.warning_fields)
+        if missing_languages:
+            return {
+                'missing_languages': missing_languages
+            }
+        else:
+            return {}
 
 
 class ReadOnlyObjectPermissionSerializerMixin:

rdmo/management/assets/js/actions/actionTypes.js

@@ -0,0 +1,37 @@
+export const FETCH_ELEMENTS_INIT = 'FETCH_ELEMENTS_INIT'
+export const FETCH_ELEMENTS_SUCCESS = 'FETCH_ELEMENTS_SUCCESS'
+export const FETCH_ELEMENTS_ERROR = 'FETCH_ELEMENTS_ERROR'
+
+export const FETCH_ELEMENT_INIT = 'FETCH_ELEMENT_INIT'
+export const FETCH_ELEMENT_SUCCESS = 'FETCH_ELEMENT_SUCCESS'
+export const FETCH_ELEMENT_ERROR = 'FETCH_ELEMENT_ERROR'
+
+export const STORE_ELEMENT_INIT = 'STORE_ELEMENT_INIT'
+export const STORE_ELEMENT_SUCCESS = 'STORE_ELEMENT_SUCCESS'
+export const STORE_ELEMENT_ERROR = 'STORE_ELEMENT_ERROR'
+
+export const CREATE_ELEMENT_INIT = 'CREATE_ELEMENT_INIT'
+export const CREATE_ELEMENT_SUCCESS = 'CREATE_ELEMENT_SUCCESS'
+export const CREATE_ELEMENT_ERROR = 'CREATE_ELEMENT_ERROR'
+
+export const DELETE_ELEMENT_INIT = 'DELETE_ELEMENT_INIT'
+export const DELETE_ELEMENT_SUCCESS = 'DELETE_ELEMENT_SUCCESS'
+export const DELETE_ELEMENT_ERROR = 'DELETE_ELEMENT_ERROR'
+
+export const UPDATE_ELEMENT = 'UPDATE_ELEMENT'
+
+export const UPLOAD_IMPORT_FILE_INIT = 'UPLOAD_FILE_INIT'
+export const UPLOAD_IMPORT_FILE_SUCCESS = 'UPLOAD_FILE_SUCCESS'
+export const UPLOAD_IMPORT_FILE_ERROR = 'UPLOAD_FILE_ERROR'
+
+export const IMPORT_ELEMENTS_INIT = 'IMPORT_ELEMENTS_INIT'
+export const IMPORT_ELEMENTS_SUCCESS = 'IMPORT_ELEMENTS_SUCCESS'
+export const IMPORT_ELEMENTS_ERROR = 'IMPORT_ELEMENTS_ERROR'
+
+export const UPDATE_IMPORT_ELEMENT = 'UPDATE_IMPORT_ELEMENT'
+export const SELECT_IMPORT_ELEMENTS = 'SELECT_IMPORT_ELEMENTS'
+export const SELECT_CHANGED_IMPORT_ELEMENTS = 'SELECT_CHANGED_IMPORT_ELEMENTS'
+export const SHOW_IMPORT_ELEMENTS = 'SHOW_IMPORT_ELEMENTS'
+export const SHOW_CHANGED_IMPORT_ELEMENTS = 'SHOW_CHANGED_IMPORT_ELEMENTS'
+export const UPDATE_IMPORT_URI_PREFIX = 'UPDATE_IMPORT_URI_PREFIX'
+export const RESET_IMPORT_ELEMENTS = 'RESET_IMPORT_ELEMENTS'