Merge remote-tracking branch 'origin/form-switching' into combined-br…

…anch-vpat01
CDLUC3 · Nov 20, 2024 · 9a66e86 · 9a66e86
2 parents 34f4d7c + fac439f
commit 9a66e86
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 38 deletions.
diff --git a/impl/ui_home.py b/impl/ui_home.py
@@ -35,6 +35,24 @@ def index(request):
             "/id/" + urllib.parse.quote(result.split()[1], ":/")
         )  # ID Details page
 
+def ajax_index_form(request):
+    if request.method not in ["GET"]:
+        return impl.ui_common.methodNotAllowed(request)
+    d = {'menu_item': 'ui_home.index'}
+    d['prefixes'] = sorted(
+        django.conf.settings.TEST_SHOULDER_DICT, key=lambda p: p['namespace'].lower()
+    )
+    d['form_placeholder'] = True  # is this necessary?
+    d = impl.ui_create.simple_form(request, d)
+    result = d['id_gen_result']
+    if result == 'edit_page':
+        # noinspection PyUnresolvedReferences
+        # return impl.ui_common.render(request, 'index', d)  # ID Creation page
+        return impl.ui_common.render(request, 'create/_home_demo_form', d)
+        # return render(request, 'create/home_demo_form.html', d)
+    elif result == 'bad_request':
+        return impl.ui_common.badRequest(request)
+
 
 def learn(request):
     if request.method != "GET":

diff --git a/settings/urls.py b/settings/urls.py
@@ -33,6 +33,7 @@
 urlpatterns = [
     # UI - RENDERED FROM TEMPLATES IN INFO REPOSITORY
     django.urls.re_path("^$",                              impl.ui_home.index,                 name="ui_home.index"),
+    django.urls.re_path("^home/ajax_index_form$",          impl.ui_home.ajax_index_form,       name="ui_home.ajax_index_form"),
     django.urls.re_path("^learn/$",                        impl.ui_home.learn,                 name="ui_home.learn"),
     django.urls.re_path("^learn/ark_open_faq$",            impl.ui_home.ark_open_faq,          name="ui_home.ark_open_faq"),
     django.urls.re_path("^learn/crossref_faq$",            impl.ui_home.crossref_faq,          name="ui_home.crossref_faq"),

diff --git a/static_src/javascripts/simple_create_ajax.js b/static_src/javascripts/simple_create_ajax.js
@@ -0,0 +1,29 @@
+document.getElementById('form-shoulder').value = document.querySelectorAll('input[name=selshoulder]')[0].value;
+
+document.querySelectorAll('input[name="selshoulder"]').forEach(radio => {
+  radio.addEventListener('change', function () {
+    var profile;
+    if(this.value.startsWith('ark')) {
+      profile = 'erc';
+    } else {
+      profile = 'datacite';
+    }
+
+    const form = document.querySelector('#create_form');
+    const formData = new FormData(form);
+    formData.set('current_profile', profile);
+
+    // Convert FormData to a query string
+    const queryString = new URLSearchParams(formData).toString();
+    fetch(`/home/ajax_index_form?${queryString}`, {
+        headers: {
+            'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value,
+        },
+    })
+    .then(response => response.text())
+    .then(data => {
+        document.getElementById('form-container').innerHTML = data;  // Replace form container HTML
+        document.getElementById('form-shoulder').value = this.value; // needs to happen after the form is replaced
+    });
+  });
+});
diff --git a/templates/create/_home_demo_form.html b/templates/create/_home_demo_form.html
@@ -0,0 +1,40 @@
+{% load i18n %}
+{% load layout_extras %}
+<form id="create_form" action="{% url "ui_home.index" %}" method="post" class="form-horizontal" role="form">
+<input type="hidden" name="current_profile" id="current_profile" value="{{current_profile.name}}"/>
+<input type="hidden" name="shoulder" id="form-shoulder" value="{{ shoulder }}"/>
+{% csrf_token %}
+
+<div class="fieldset-stacked fieldset__top-border home__fieldset" role="group" aria-labelledby="fieldset__2">
+
+  <div id="fieldset__2" aria-label="{% trans "Step 2 - Describe the identified object" %}"
+  class="fieldset-stacked__legend-number-2">
+  {% trans "Describe the identified object" %}
+</div>
+
+<div class="row">
+  {{ form.non_field_errors }}
+  {% for field in form %}
+  <div class="col-md-5 home__text-field">
+    <div class="fcontrol__group-stacked{% if field.errors %}--invalid{% endif %}">
+      {% if field|fieldtype == "TextInput" %}
+        <label for="{{ field.id_for_label }}" class="fcontrol__text-label-hidden">{{ field.label }}</label>
+        {{ field|add_attributes:"fcontrol__text-field-stacked" }}
+      {% else %}
+        <label for="{{ field.id_for_label }}" class="fcontrol__select-label-hidden">{{ field.label }}</label>
+        {{ field|add_attributes:"fcontrol__select" }}
+      {% endif %}
+      {% if field.errors %}
+        <span class="fcontrol__invalid-flag">{% for error in field.errors %}{{ error|escape }}{% endfor %}</span>
+      {% endif %}
+    </div>
+  </div>
+  {% endfor %}
+
+  <div class="col-md-2 home__create-button">
+    <button class="home__button-primary">{% trans "Create" %}</button>
+  </div>
+
+</div>
+</div>
+</form>
diff --git a/templates/index.html b/templates/index.html
@@ -19,6 +19,7 @@
   }
 {% endblock %}
 {% block content %}
+{% csrf_token %}
     <h1 style="display: none;">EZID: {% trans "Identifiers made easy" %}</h1>
     <!-- Home Banner -->
     <div class="home-banner">
@@ -33,7 +34,7 @@ <h1 style="display: none;">EZID: {% trans "Identifiers made easy" %}</h1>
     <div class="home__identifier-container">
 
       <div class="home__identifier-lead-box">
-        <p class="home__identifier-lead-heading">{% trans "See how easy it is" %}:</p>
+        <h2 class="home__identifier-lead-heading">{% trans "See how easy it is" %}:</h2>
         <p class="home__identifier-lead-note">
       {% comment %}Translators: Copy HTML tags over and only translate words outside of these tags
       i.e.: <p>TRANSLATE TEXT WRAPPED BY HTML TAGS</p>
@@ -52,53 +53,20 @@ <h1 style="display: none;">EZID: {% trans "Identifiers made easy" %}</h1>
       </div>
 
       <div class="home__identifier-form">
-        <form id="create_form" action="{% url "ui_home.index" %}" method="post" class="form-horizontal" role="form">
-        <input type="hidden" name="current_profile" id="current_profile" value="{{current_profile.name}}" />
 
         <fieldset class="fieldset-inline" role="group" aria-labelledby="fieldset__1">
           <span id="fieldset__1" aria-label="{% trans "Step 1 - Choose an identifier type" %}" class="fieldset-inline__legend-number-1">{% trans "Choose an identifier type" %}</span>
 
       {% for p in prefixes %}
           <label for="{{p.prefix}}" class="fcontrol__radio-label-inline home__radio-labels">
-            <input id="{{p.prefix}}" class="fcontrol__radio-button-stacked" type="radio" value="{{p.prefix}}" name="shoulder" {% selected_radio "shoulder" forloop.counter p.prefix %}> <span>{% shoulder_display p "True" %}</span>
+            <input id="{{p.prefix}}" class="fcontrol__radio-button-stacked" type="radio" value="{{p.prefix}}" name="selshoulder" {% selected_radio "shoulder" forloop.counter p.prefix %}> <span>{% shoulder_display p "True" %}</span>
           </label>
       {% endfor %}
           {% help_icon "choose_id_demo" _("on choosing the type of identifier") %}
         </fieldset>
-
-        <div class="fieldset-stacked fieldset__top-border home__fieldset" role="group" aria-labelledby="fieldset__2">
-
-          <div id="fieldset__2" aria-label="{% trans "Step 2 - Describe the identified object" %}"
-            class="fieldset-stacked__legend-number-2">
-            {% trans "Describe the identified object" %}
-          </div>
-
-          <div class="row">
-            {{ form.non_field_errors }}
-            {% for field in form %}
-            <div class="col-md-5 home__text-field">
-              <div class="fcontrol__group-stacked{% if field.errors %}--invalid{% endif %}">
-              {% if field|fieldtype == "TextInput" %}
-                <label for="{{ field.id_for_label }}" class="fcontrol__text-label-hidden">{{ field.label }}</label>
-                {{ field|add_attributes:"fcontrol__text-field-stacked" }}
-              {% else %}
-                <label for="{{ field.id_for_label }}" class="fcontrol__select-label-hidden">{{ field.label }}</label>
-                {{ field|add_attributes:"fcontrol__select" }}
-              {% endif %}
-              {% if field.errors %}
-                <span class="fcontrol__invalid-flag">{% for error in field.errors %}{{ error|escape }}{% endfor %}</span>
-              {% endif %}
-              </div>
-            </div>
-            {% endfor %}
-
-            <div class="col-md-2 home__create-button">
-              <button class="home__button-primary">{% trans "Create" %}</button>
-            </div>
-
-          </div>
+        <div id="form-container">
+          {% include "create/_home_demo_form.html" %}
         </div>
-        </form>
       </div>
     </div>
     <script type="text/javascript">
@@ -125,7 +93,7 @@ <h1 style="display: none;">EZID: {% trans "Identifiers made easy" %}</h1>
       }
     </script>
 
-    <script type="text/javascript" src="/static/javascripts/simple_create.js"></script>
+    <script type="text/javascript" src="/static/javascripts/simple_create_ajax.js"></script>
     <script type="text/javascript" src="/static/javascripts/fix_target.js"></script>
     {% include "info/popup_help.html" %}
     <script type="text/javascript" src="/static/javascripts/help_box_.js"></script>