feat(contract): add javascript validation (#148) [norelease]

This pull request includes several changes to the admin contract and tree type views, as well as improvements to form validation and database schema updates. The most important changes include updating URLs, adding form validation, and modifying the database schema. ### URL Updates: * Updated URLs in `app/src/app/Views/Admin/Contract/Create.php`, `Edit.php`, and `Contracts.php` to include the `/admin` prefix for better organization and consistency. [[1]](diffhunk://#diff-38a9b8706ade2452bf354d849198cc6f40fb103c6fcc4365307fafccc71b77a9L2-L69) [[2]](diffhunk://#diff-311cfe2714a9939b4100544862231bed7e1bb24a54dcf0297e4d3ce748b2eee5L2-L4) [[3]](diffhunk://#diff-f42bf66d127a9e77d1fa1d01e2177ea5ab22354f4acb3279b19760b992d0f923L15-R15) ### Form Validation Enhancements: * Enhanced form validation in `app/src/public/assets/js/app.js` by adding reusable validation functions and event listeners for contract and tree type forms. This includes checks for empty fields, regex pattern validation, date range validation, positive integer validation, and maximum value validation. ### Database Schema Modifications: * Modified the `contracts` table in `database/start-scripts/0-init.sql` to change the data type of `start_date` and `end_date` from `timestamp` to `date` for better accuracy and consistency. ### UI and Form Adjustments: * Added error message divs and adjusted form IDs in `app/src/app/Views/Admin/Contract/Create.php` and `Edit.php` to improve user experience and error handling. [[1]](diffhunk://#diff-38a9b8706ade2452bf354d849198cc6f40fb103c6fcc4365307fafccc71b77a9L2-L69) [[2]](diffhunk://#diff-311cfe2714a9939b4100544862231bed7e1bb24a54dcf0297e4d3ce748b2eee5L14-L68) * Updated form IDs and removed unnecessary divs for submit buttons in `app/src/app/Views/Admin/TreeType/Create.php` and `Edit.php` to streamline the UI. [[1]](diffhunk://#diff-44d3d8172b626b0986e1ec03c382c4a1ea15ff0c7ae3df656290f9e83bb2126eL15-R15) [[2]](diffhunk://#diff-78a2b54262dc0a49ba0f676ccd46806c3483d7f6a76d921b3edc39e50f240536L14-R15)
Projecte-UrbanTree · Dec 10, 2024 · f1327cd · f1327cd
2 parents 586d362 + b06d149
commit f1327cd
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 115 deletions.
diff --git a/app/src/app/Views/Admin/Contract/Create.php b/app/src/app/Views/Admin/Contract/Create.php
@@ -1,71 +1,65 @@
 <div class="mb-4 flex justify-end">
-    <a href="/contracts"
+    <a href="/admin/contracts"
         class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg shadow focus:outline-none focus:ring focus:ring-green-500 flex items-center space-x-2">
-        <!-- Heroicon for return/back (chevron-left) -->
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
         </svg>
-        <span>Return to Contract</span>
+        <span>Return to Contracts</span>
     </a>
 </div>
 
 <div class="bg-white p-8 border border-gray-300 rounded-lg shadow-md">
     <h2 class="text-2xl font-semibold text-gray-800 mb-6">Create Contract</h2>
-    <form action="/contract/store" method="POST" class="space-y-6">
-        <!-- Name -->
+
+    <form id="contractForm" action="/admin/contract/store" method="POST" class="space-y-6">
+        <div id="errorMessages"
+            class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6"></div>
+
         <div>
             <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
             <input type="text" id="name" name="name"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- Start Date -->
         <div>
             <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
             <input type="date" id="start_date" name="start_date"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- End Date -->
         <div>
             <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
             <input type="date" id="end_date" name="end_date"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- Invoice Proposed -->
         <div>
             <label for="invoice_proposed" class="block text-sm font-medium text-gray-700 mb-1">Invoice Proposed</label>
-            <input type="number" step="0.01" id="invoice_proposed" name="invoice_proposed"
+            <input type="number" step="0.01" id="invoice_proposed" name="invoice_proposed" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- Invoice Agreed -->
         <div>
-            <label for="invoice_agreed" class="block text-sm font-medium text-gray-700 mb-1">Invoice agreed</label>
-            <input type="number" id="invoice_agreed" name="invoice_agreed"
+            <label for="invoice_agreed" class="block text-sm font-medium text-gray-700 mb-1">Invoice Agreed</label>
+            <input type="number" id="invoice_agreed" name="invoice_agreed" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- Invoice Paid -->
         <div>
-            <label for="invoice_paid" class="block text-sm font-medium text-gray-700 mb-1">Invoice paid</label>
-            <input type="number" id="invoice_paid" name="invoice_paid"
+            <label for="invoice_paid" class="block text-sm font-medium text-gray-700 mb-1">Invoice Paid</label>
+            <input type="number" id="invoice_paid" name="invoice_paid" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
                 required>
         </div>
 
-        <!-- Submit Button -->
-        <div class="flex items-center">
-            <button type="submit"
-                class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
-                Create Contract
-            </button>
-        </div>
+        <button type="submit"
+            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
+            Create Contract
+        </button>
     </form>
-</div>
+</div>
diff --git a/app/src/app/Views/Admin/Contract/Edit.php b/app/src/app/Views/Admin/Contract/Edit.php
@@ -1,7 +1,6 @@
 <div class="mb-4 flex justify-end">
-    <a href="/contracts"
+    <a href="/admin/contracts"
         class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg shadow focus:outline-none focus:ring focus:ring-green-500 flex items-center space-x-2">
-        <!-- Heroicon for return/back (chevron-left) -->
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
         </svg>
@@ -11,60 +10,56 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg
 
 <div class="bg-white p-8 border border-gray-300 rounded-lg shadow-md">
     <h2 class="text-2xl font-semibold text-gray-800 mb-6">Edit Contract</h2>
-    <form action="/contract/<?php echo htmlspecialchars($contract->getId()); ?>/update" method="POST" class="space-y-6">
-        <!-- Name -->
+
+    <form id="contractForm" action="/admin/contract/<?php echo htmlspecialchars($contract->getId()); ?>/update"
+        method="POST" class="space-y-6">
+        <div id="errorMessages"
+            class="hidden bg-red-100 border border-red-400 text-red700 px-4 py-3 rounded relative mb-6"></div>
+
         <div>
             <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Name</label>
             <input type="text" id="name" name="name" value="<?php echo htmlspecialchars($contract->name); ?>"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- Start Date -->
         <div>
             <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
             <input type="date" id="start_date" name="start_date"
                 value="<?php echo htmlspecialchars($contract->start_date); ?>"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- End Date -->
         <div>
             <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
             <input type="date" id="end_date" name="end_date"
                 value="<?php echo htmlspecialchars($contract->end_date); ?>"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- Invoice Proposed -->
         <div>
             <label for="invoice_proposed" class="block text-sm font-medium text-gray-700 mb-1">Invoice Proposed</label>
             <input type="number" step="0.01" id="invoice_proposed" name="invoice_proposed"
-                value="<?php echo htmlspecialchars($contract->invoice_proposed); ?>"
+                value="<?php echo htmlspecialchars($contract->invoice_proposed); ?>" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- Invoice Agreed -->
         <div>
             <label for="invoice_agreed" class="block text-sm font-medium text-gray-700 mb-1">Invoice Agreed</label>
             <input type="number" step="0.01" id="invoice_agreed" name="invoice_agreed"
-                value="<?php echo htmlspecialchars($contract->invoice_agreed); ?>"
+                value="<?php echo htmlspecialchars($contract->invoice_agreed); ?>" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- Invoice Paid -->
         <div>
             <label for="invoice_paid" class="block text-sm font-medium text-gray-700 mb-1">Invoice Paid</label>
             <input type="number" step="0.01" id="invoice_paid" name="invoice_paid"
-                value="<?php echo htmlspecialchars($contract->invoice_paid); ?>"
+                value="<?php echo htmlspecialchars($contract->invoice_paid); ?>" max="999999999.99"
                 class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500">
         </div>
 
-        <!-- Submit Button -->
-        <div class="flex items-center">
-            <button type="submit"
-                class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
-                Update Contract
-            </button>
-        </div>
+        <button type="submit"
+            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
+            Update Contract
+        </button>
     </form>
-</div>
+</div>
diff --git a/app/src/app/Views/Admin/Contracts.php b/app/src/app/Views/Admin/Contracts.php
@@ -12,7 +12,7 @@
 <?php } ?>
 
 <div class="mb-4 flex justify-end">
-    <a href="/contract/create"
+    <a href="/admin/contract/create"
         class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg shadow focus:outline-none focus:ring focus:ring-green-500">
         Create Contract
     </a>
@@ -63,7 +63,7 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg
                     </td>
                     <td class="px-4 py-3 border-b text-center flex justify-center space-x-4">
                         <!-- Edit Button (Pencil Icon) -->
-                        <a href="/contract/<?php echo htmlspecialchars($contract->getId()); ?>/edit"
+                        <a href="/admin/contract/<?php echo htmlspecialchars($contract->getId()); ?>/edit"
                             class="text-blue-500 hover:text-blue-700" title="Edit">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="w-5 h-5">
@@ -72,7 +72,7 @@ class="text-blue-500 hover:text-blue-700" title="Edit">
                             </svg>
                         </a>
                         <!-- Delete Button (Trash Icon) -->
-                        <a href="/contract/<?php echo htmlspecialchars($contract->getId()); ?>/delete"
+                        <a href="/admin/contract/<?php echo htmlspecialchars($contract->getId()); ?>/delete"
                             onclick="return confirm('Are you sure you want to delete this contract?');"
                             class="text-red-500 hover:text-red-700" title="Delete">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"

diff --git a/app/src/app/Views/Admin/TreeType/Create.php b/app/src/app/Views/Admin/TreeType/Create.php
@@ -12,7 +12,7 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg
 <div class="bg-white p-8 border border-gray-300 rounded-lg shadow-md">
     <h2 class="text-2xl font-semibold text-gray-800 mb-6">Create Tree Type</h2>
 
-    <form id="treeForm" action="/admin/tree-type/store" method="POST" class="space-y-6">
+    <form id="treeTypeForm" action="/admin/tree-type/store" method="POST" class="space-y-6">
         <div id="errorMessages"
             class="hidden bg-red-100 border border-red-400 text-red700 px-4 py-3 rounded relative mb-6"></div>
 
@@ -41,11 +41,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
         </div>
 
         <!-- Submit Button -->
-        <div class="flex items-center">
-            <button type="submit"
-                class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
-                Create Tree Type
-            </button>
-        </div>
+        <button type="submit"
+            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
+            Create Tree Type
+        </button>
     </form>
-</div>
+</div>
diff --git a/app/src/app/Views/Admin/TreeType/Edit.php b/app/src/app/Views/Admin/TreeType/Edit.php
@@ -11,7 +11,8 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg
 
 <div class="bg-white p-8 border border-gray-300 rounded-lg shadow-md">
     <h2 class="text-2xl font-semibold text-gray-800 mb-6">Edit Tree Type</h2>
-    <form id="treeForm" action="/admin/tree-type/<?php echo htmlspecialchars($tree_type->getId()); ?>/update"
+
+    <form id="treeTypeForm" action="/admin/tree-type/<?php echo htmlspecialchars($tree_type->getId()); ?>/update"
         method="POST" class="space-y-6">
         <div id="errorMessages"
             class="hidden bg-red-100 border border-red-400 text-red700 px-4 py-3 rounded relative mb-6"></div>
@@ -39,11 +40,9 @@ class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none foc
 
 
         <!-- Submit Button -->
-        <div class="flex items-center">
-            <button type="submit"
-                class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
-                Update Tree Type
-            </button>
-        </div>
+        <button type="submit"
+            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg focus:outline-none focus:ring focus:ring-blue-500">
+            Update Tree Type
+        </button>
     </form>
-</div>
+</div>