Feature/3887 maned ed required for new group

cms/sass/main.scss

@@ -69,6 +69,7 @@
   "pages/search",
   "pages/sponsors",
   "pages/uploadmetadata",
+  "pages/editorgroup",
 
   "themes/dashboard",
   "themes/editorial-form",

cms/sass/pages/_editorgroup.scss

@@ -0,0 +1,20 @@
+.editor_group_form {
+  &--error {
+    margin-top: -1.5rem; //move visually into question-container
+    margin-bottom: $spacing-04;
+
+      color: $sanguine;
+
+      &:before {
+        display: inline-block;
+        margin-right: $spacing-01;
+        content: '';
+        background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4.6V7M7 9.4H7.006M4.516 1H9.484L13 4.516V9.484L9.484 13H4.516L1 9.484V4.516L4.516 1Z' stroke='%23982E0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        height: 14px;
+        width: 14px;
+      }
+
+  }
+
+}

doajtest/testbook/administrative_search/editor_groups.yml

@@ -65,3 +65,42 @@ tests:
   - step: Click the black X button to clear all filters
     results:
     - The interface returns to the initial state
+- title: Test New Editor Group Form
+  context:
+    role: admin
+  steps:
+    - step: go to a new Editor Group form at /admin/editor_group
+      results:
+      - An Editor group form is rendered with 4 fields - "Group Name", "Managin Editor", "Editor" and "Associate Editors"
+    - step: without putting any data click "Save group" button
+      results:
+      - First input "Group name" is focused and the message "Please fill in this field" is displayed
+    - step: add a name to the Group Name field
+    - step: click "Save group" button
+      results:
+      - Error is displayed under "Managing Editor" field and "Editor" group
+    - step:  click on the "Managing Editor" field
+      results:
+      - a search input is displayed with "Please enter 1 or more character" prompt under the input
+    - step: start typing a name in the input
+      results:
+      - a list of matching names is display in a dropdown below the input
+    - step: choose one of the names
+    - step: click "Save group" button
+      results:
+      - The error under the "Managing Editor" field dissapears
+      - The error under the "Editor" field is still displayed
+    - step: choose and editor
+    - step: click "Save group" button
+      results:
+      - Group is successfully created
+    - step: Open new form at /admin/editor_group
+    - step: click on the "Associate Editors"
+      results:
+      - The "Please enter 1 or more character" prompt is displayed
+    - step: type a name and choose one account from the list
+      results:
+      - the name is added to the "Associate Editors" input
+    - step: add another name to the input
+      results:
+      - it is possible to add more than one account to the "Associate Editors" input

portality/templates/admin/editor_group.html

@@ -3,79 +3,89 @@
 {% block page_title %}Editor group{% endblock %}
 
 {% block admin_content %}
-<div class="row">
-  <div class="col-md-6 col-md-offset-3">
-    {% include "formcontext/_error_header.html" %}
-    {% from "_formhelpers.html" import render_field_horizontal %}
+    <div class="row">
+        <div class="col-md-6 col-md-offset-3">
+            {% include "formcontext/_error_header.html" %}
+            {% from "_formhelpers.html" import render_field_horizontal %}
 
-    <form method="post" action="{{ url_for('admin.editor_group') }}{% if form.group_id.data and form.group_id.data != '' %}/{{form.group_id.data}}{% endif %}" class="form form--compact" id="editor_group_form">
-      <fieldset>
-        {{ form.group_id }}
-        {{ render_field_horizontal(form.name, placeholder="Enter a unique group name") }}
-        {{ render_field_horizontal(form.maned, placeholder="Managing Editor’s user ID") }}
-        {{ render_field_horizontal(form.editor, placeholder="Editor’s user ID") }}
-        {{ render_field_horizontal(form.associates, placeholder="Associate editor user IDs") }}
-        <button class="button button--primary" type="submit">Save Group</button>
-      </fieldset>
-    </form>
-  </div>
-</div>
+            <form method="post" action="
+
+                    {{ url_for('admin.editor_group') }}{% if form.group_id.data and form.group_id.data != '' %}/{{ form.group_id.data }}{% endif %}"
+                  class="form form--compact editor_group_form" id="editor_group_form">
+                <fieldset>
+                    {{ form.group_id }}
+                    {{ render_field_horizontal(form.name, placeholder="Enter a unique group name") }}
+                    {{ render_field_horizontal(form.maned, placeholder="Managing Editor’s user ID") }}
+                    {% if form.maned_error %}
+                            <p class="editor_group_form--error">Please provide a managing editor for the group.</p>
+                    {% endif %}
+                    {{ render_field_horizontal(form.editor, placeholder="Editor’s user ID") }}
+                    {% if form.editor_error %}
+                            <p class="editor_group_form--error">Please provide an editor for the group.</p>
+                    {% endif %}
+                    {{ render_field_horizontal(form.associates, placeholder="Associate editor user IDs") }}
+                    <button class="button button--primary" type="submit">Save Group</button>
+                </fieldset>
+            </form>
+        </div>
+    </div>
 {% endblock %}
 
 {% block extra_js_bottom %}
-<script type="text/javascript">
+    <script type="text/javascript">
+
+        function userAutocomplete(prefix, callback) {
+            $.ajax({
+                type: "GET",
+                data: {q: prefix, s: 10},
+                dataType: "json",
+                url: "{{url_for('admin.user_autocomplete')}}",
+                success: function (resp) {
+                    var data = {results: resp};
+                    callback(data);
+                }
+            })
+        }
 
-    function userAutocomplete(prefix, callback) {
-        $.ajax({
-            type : "GET",
-            data : {q : prefix, s : 10},
-            dataType: "json",
-            url: "{{url_for('admin.user_autocomplete')}}",
-            success: function(resp) {
-                var data = {results: resp};
+        $("#maned").select2({
+            allowClear: true,
+            minimumInputLength: 1,
+            query: function (query) {
+                userAutocomplete(query.term, query.callback)
+            },
+            initSelection: function (element, callback) {
+                var data = {id: element.val(), text: element.val()};
                 callback(data);
             }
-        })
-    }
+        });
 
-    $("#maned").select2({
-        allowClear: true,
-        minimumInputLength: 1,
-        query : function(query) {
-            userAutocomplete(query.term, query.callback)
-        },
-        initSelection : function (element, callback) {
-            var data = {id: element.val(), text: element.val()};
-            callback(data);
-        }
-    });
-
-    $("#editor").select2({
-        minimumInputLength: 1,
-        query : function(query) {
-            userAutocomplete(query.term, query.callback)
-        },
-        initSelection : function (element, callback) {
-            var data = {id: element.val(), text: element.val()};
-            callback(data);
-        }
-    });
+        $("#editor").select2({
+            allowClear: true,
+            minimumInputLength: 1,
+            query: function (query) {
+                userAutocomplete(query.term, query.callback)
+            },
+            initSelection: function (element, callback) {
+                var data = {id: element.val(), text: element.val()};
+                callback(data);
+            }
+        });
 
-    $("#associates").select2({
-        minimumInputLength: 1,
-        multiple: true,
-        query: function (query) {
-            userAutocomplete(query.term, query.callback)
-        },
-        initSelection : function (element, callback) {
-            var data = [];
-            $(element.val().split(",")).each(function () {
-                data.push({id: this, text: this});
-            });
-            callback(data);
-        }
-    });
+        $("#associates").select2({
+            minimumInputLength: 1,
+            multiple: true,
+            query: function (query) {
+                userAutocomplete(query.term, query.callback)
+            },
+            initSelection: function (element, callback) {
+                var data = [];
+                $(element.val().split(",")).each(function () {
+                    data.push({id: this, text: this});
+                });
+                callback(data);
+            }
+        });
 
-</script>
+    </script>
 
 {% endblock %}

portality/view/forms.py

@@ -95,9 +95,25 @@ class EditorGroupForm(Form):
     group_id = HiddenField("Group ID", [validators.Optional()])
     name = StringField("Group Name", [validators.DataRequired(), UniqueGroupName()])
     maned = StringField("Managing Editor", [validators.Optional(), MustHaveRole("admin")])
-    editor = StringField("Editor", [validators.DataRequired(), NotRole("publisher")])
+
+    editor = StringField("Editor", [validators.Optional(), NotRole("publisher")])
     associates = StringField("Associate Editors", [validators.Optional(), NotRole("publisher")])
 
+    def __init__(self, formdata=None, obj=None, prefix='', data=None, meta=None, **kwargs):
+        super().__init__(formdata=formdata, obj=obj, prefix=prefix, data=data, meta=meta, **kwargs)
+        self.editor_error = False;
+        self.maned_error = False;
+
+    def _validate_editors(self):
+        if not self.data["maned"]:
+            self.maned_error = True;
+        if not self.data["editor"]:
+            self.editor_error = True;
+        return not self.maned_error and not self.editor_error;
+
+    def validate(self, extra_validators = None):
+        return self._validate_editors() and super(EditorGroupForm, self).validate();
+
 ##########################################################################
 ## Continuations Forms
 ##########################################################################