wip: sorting out forms for adding Engagements

1 files changed, 70 insertions, 44 deletions

diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html
index 3dfe249..a0cdea2 100644
--- a/engagements/templates/engagements/engagement_form.html
+++ b/engagements/templates/engagements/engagement_form.html
@@ -1,60 +1,87 @@
 {% extends "core/base.html" %}
 
 {% load static %}
+{% load widget_tweaks %}
 
 {% block title %}Create new engagement{% endblock title %}
 
 {% block content %}
-<div class="container mx-auto px-4 py-8">
-    <div class="bg-white shadow-md rounded-lg overflow-hidden">
-        <header class="bg-blue-100 p-4">
-            <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
-        </header>
-        <div class="p-6">
-            <div class="mb-8">
-                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
-                    <h4 class="text-lg font-semibold mb-2">Step 1</h4>
-                    <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p>
-                    <h4 class="text-lg font-semibold mb-2">Step 2</h4>
-                    <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p>
+    <div class="container mx-auto w-2/3 px-4 py-8">
+        <div class="bg-white shadow-md rounded-lg overflow-hidden">
+            <header class="bg-blue-100 p-4">
+                <h2 class="text-3xl font-bold text-center">{{ title }}</h2>
+            </header>
+            <div class="p-6">
+                <div class="mb-8">
+                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg">
+                        <h4 class="text-lg font-semibold mb-2">Step 1</h4>
+                        <p class="mb-4">To roughly plan out future events, you provide the minimal details here:
+                            <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of
+                                Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external
+                                site</strong> or operation and finally the <strong>inspectors</strong> who are carrying
+                            out the work.</p>
+                        <h4 class="text-lg font-semibold mb-2">Step 2</h4>
+                        <p>So that we can track the finer details involved with an Assessment or Inspection, each
+                            Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>,
+                            <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to
+                            these components. In addition, each component can be associated with
+                            <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the
+                            overarching Engagement using this form, you will have the opportunity to add components.</p>
+                    </div>
                 </div>
-            </div>
 
-            <div class="mt-8">
-                <h4 class="text-xl font-semibold mb-4">Enter main details:</h4>
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg">
-                    <div class="px-4 py-5 sm:p-6">
+                <div class="mt-8 mx-auto border p-6 bg-white shadow-md rounded-lg">
+                    <h4 class="text-xl font-semibold mb-1">Enter main details:</h4>
+                    <div class="px-2 pt-1 sm:p-2">
                         <form method="post" class="space-y-6">
                             {% csrf_token %}
-                            {% for field in form %}
-                                <div class="mb-4">
-                                    <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1">
-                                        {{ field.label }}
-                                    </label>
-                                    {% if field.field.widget.input_type == 'checkbox' %}
-                                        <div class="flex items-center">
-                                            <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                                            <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span>
-                                        </div>
-                                    {% elif field.field.widget.input_type == 'select' %}
-                                        <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                                            {% for choice in field.field.choices %}
-                                                <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option>
-                                            {% endfor %}
-                                        </select>
-                                    {% else %}
-                                        <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md">
-                                    {% endif %}
-                                    {% if field.help_text and field.field.widget.input_type != 'checkbox' %}
-                                        <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p>
-                                    {% endif %}
-                                    {% for error in field.errors %}
-                                        <p class="mt-2 text-sm text-red-600">{{ error }}</p>
+                            <div>
+                                {{ form.external_party.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.external_party class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.external_party.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        
+                            <div>
+                                {{ form.proposed_start_date.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.proposed_start_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                </div>
+                            </div>
+
+                            <div>
+                                {{ form.proposed_end_date.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.proposed_end_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                </div>
+                            </div>
+
+                            <div>
+                                {{ form.engagement_type.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.engagement_type class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.engagement_type.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
                                     {% endfor %}
                                 </div>
-                            {% endfor %}
+                            </div>
+
+                            <div>
+                                {{ form.officers.label_tag }}
+                                <div class="my-2">
+                                    {% render_field form.officers class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %}
+                                    {% for error in form.officers.errors %}
+                                        <p class="text-red-500 text-sm">{{ error }}</p>
+                                    {% endfor %}
+                                </div>
+                            </div>
+
                             <div>
-                                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                                <button type="submit"
+                                        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                     Save
                                 </button>
                             </div>
@@ -64,5 +91,4 @@
             </div>
         </div>
     </div>
-</div>
 {% endblock content %}