From c3c570276244f89038797bc8a463af88bd4cfd5c Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Wed, 4 Sep 2024 15:02:30 +0100
Subject: wip: sorting out forms for adding Engagements

---
 core/static/css/output.css                         | 173 +++------------------
 engagements/forms.py                               |   1 +
 .../templates/engagements/engagement_form.html     | 114 ++++++++------
 3 files changed, 91 insertions(+), 197 deletions(-)

diff --git a/core/static/css/output.css b/core/static/css/output.css
index 1be34cb..67f0dc9 100644
--- a/core/static/css/output.css
+++ b/core/static/css/output.css
@@ -875,22 +875,6 @@ html {
   }
 }
 
-.checkbox {
-  flex-shrink: 0;
-  --chkbg: var(--fallback-bc,oklch(var(--bc)/1));
-  --chkfg: var(--fallback-b1,oklch(var(--b1)/1));
-  height: 1.5rem;
-  width: 1.5rem;
-  cursor: pointer;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-width: 1px;
-  border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
-  --tw-border-opacity: 0.2;
-}
-
 .label {
   display: flex;
   -webkit-user-select: none;
@@ -947,40 +931,6 @@ html {
   align-items: center;
 }
 
-.select {
-  display: inline-flex;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  height: 3rem;
-  min-height: 3rem;
-  padding-inline-start: 1rem;
-  padding-inline-end: 2.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  line-height: 2;
-  border-radius: var(--rounded-btn, 0.5rem);
-  border-width: 1px;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
-  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 20px) calc(1px + 50%),
-    calc(100% - 16.1px) calc(1px + 50%);
-  background-size: 4px 4px,
-    4px 4px;
-  background-repeat: no-repeat;
-}
-
-.select[multiple] {
-  height: auto;
-}
-
 .table {
   position: relative;
   width: 100%;
@@ -1063,54 +1013,6 @@ html {
   }
 }
 
-.checkbox:focus {
-  box-shadow: none;
-}
-
-.checkbox:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
-}
-
-.checkbox:disabled {
-  border-width: 0px;
-  cursor: not-allowed;
-  border-color: transparent;
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  opacity: 0.2;
-}
-
-.checkbox:checked,
-  .checkbox[aria-checked="true"] {
-  background-repeat: no-repeat;
-  animation: checkmark var(--animation-input, 0.2s) ease-out;
-  background-color: var(--chkbg);
-  background-image: linear-gradient(-45deg, transparent 65%, var(--chkbg) 65.99%),
-      linear-gradient(45deg, transparent 75%, var(--chkbg) 75.99%),
-      linear-gradient(-45deg, var(--chkbg) 40%, transparent 40.99%),
-      linear-gradient(
-        45deg,
-        var(--chkbg) 30%,
-        var(--chkfg) 30.99%,
-        var(--chkfg) 40%,
-        transparent 40.99%
-      ),
-      linear-gradient(-45deg, var(--chkfg) 50%, var(--chkbg) 50.99%);
-}
-
-.checkbox:indeterminate {
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));
-  background-repeat: no-repeat;
-  animation: checkmark var(--animation-input, 0.2s) ease-out;
-  background-image: linear-gradient(90deg, transparent 80%, var(--chkbg) 80%),
-      linear-gradient(-90deg, transparent 80%, var(--chkbg) 80%),
-      linear-gradient(0deg, var(--chkbg) 43%, var(--chkfg) 43%, var(--chkfg) 57%, var(--chkbg) 57%);
-}
-
 @keyframes checkmark {
   0% {
     background-position-y: 5px;
@@ -1288,50 +1190,6 @@ html {
   }
 }
 
-.select:focus {
-  box-shadow: none;
-  border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-  outline-style: solid;
-  outline-width: 2px;
-  outline-offset: 2px;
-  outline-color: var(--fallback-bc,oklch(var(--bc)/0.2));
-}
-
-.select-disabled,
-  .select:disabled,
-  .select[disabled] {
-  cursor: not-allowed;
-  --tw-border-opacity: 1;
-  border-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));
-  --tw-bg-opacity: 1;
-  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
-  color: var(--fallback-bc,oklch(var(--bc)/0.4));
-}
-
-.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-disabled::placeholder,
-  .select:disabled::placeholder,
-  .select[disabled]::placeholder {
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-placeholder-opacity)));
-  --tw-placeholder-opacity: 0.2;
-}
-
-.select-multiple,
-  .select[multiple],
-  .select[size].select:not([size="1"]) {
-  background-image: none;
-  padding-right: 1rem;
-}
-
-[dir="rtl"] .select {
-  background-position: calc(0% + 12px) calc(1px + 50%),
-    calc(0% + 16px) calc(1px + 50%);
-}
-
 @keyframes skeleton {
   from {
     background-position: 150%;
@@ -1402,6 +1260,11 @@ html {
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -1479,16 +1342,12 @@ html {
   display: grid;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .min-h-full {
   min-height: 100%;
 }
 
-.w-4 {
-  width: 1rem;
+.w-2\/3 {
+  width: 66.666667%;
 }
 
 .w-full {
@@ -1772,6 +1631,10 @@ html {
   padding-bottom: 2rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
@@ -1895,6 +1758,11 @@ html {
   color: rgb(79 70 229 / var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
 .text-red-600 {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
@@ -1992,11 +1860,6 @@ html {
   text-decoration-line: underline;
 }
 
-.focus\:border-blue-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2065,6 +1928,10 @@ html {
     border-radius: 0.5rem;
   }
 
+  .sm\:p-2 {
+    padding: 0.5rem;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }
diff --git a/engagements/forms.py b/engagements/forms.py
index a1c3c44..e3ac85a 100644
--- a/engagements/forms.py
+++ b/engagements/forms.py
@@ -186,6 +186,7 @@ class EngagementCreateForm(forms.ModelForm):
             "proposed_start_date",
             "proposed_end_date",
             "engagement_type",
+            "external_party",
             "officers",
         ]
         labels = {
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 %}
-- 
cgit v1.2.3