fix: show errors when inputs are incorrect (#204)

* fix: show errors when inputs are incorrect
* chore: bump __init__.py version

Author: vmnavarro94

poll/public/css/poll_edit.css

@@ -46,6 +46,32 @@
     float: right;
 }
 
+#poll-error-container {
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    color: #721c24;
+    padding: 10px;
+    margin: 10px 0;
+    border-radius: 4px;
+    font-weight: 500;
+    display: none; 
+    cursor: pointer; 
+}
+
+#poll-error-container:hover {
+    background-color: #f5c2c7;
+    transition: background-color 0.3s ease;
+}
+
+#poll-error-container:before {
+    content: "⚠️ ";
+}
+
+#poll-error-message {
+    display: inline-block;
+    margin-top: 5px;
+}
+
 .poll-setting-label {
     text-transform: capitalize;
 }

poll/public/html/poll_edit.html

@@ -107,6 +107,9 @@ <h2><label for="poll-feedback-editor">{% trans 'Feedback' %}</label></h2>
             <li class="action-item">
                 <a href="#" class="button cancel-button">{% trans 'Cancel' %}</a>
             </li>
+            <li class="error-message" id="poll-error-container" title="Click to dismiss">
+                <span class="action-item" id="poll-error-message"></span>
+            </li>
         </ul>
     </div>
     </form>

poll/public/js/poll_edit.js

@@ -14,6 +14,14 @@ function PollEditUtil(runtime, element, pollType) {
         // Set up the editing form for a Poll or Survey.
         var temp = $('.poll-form-component', element).html();
 
+        // Hide error container initially
+        $('#poll-error-container', element).hide();
+        
+        // Allow clicking on the error message to dismiss it
+        $('#poll-error-container', element).click(function() {
+            $(this).hide();
+        });
+
         PollCommonUtil.init(Handlebars);
 
         self.answerTemplate = Handlebars.compile(temp);
@@ -234,6 +242,8 @@ function PollEditUtil(runtime, element, pollType) {
         data['private_results'] = eval($('#poll-private-results', element).val());
 
         if (notify) {
+            // Hide any previous error messages
+            $('#poll-error-container', element).hide();
             runtime.notify('save', {state: 'start', message: gettext("Saving")});
         }
         $.ajax({
@@ -246,9 +256,14 @@ function PollEditUtil(runtime, element, pollType) {
                 if (result['success'] && notify) {
                     runtime.notify('save', {state: 'end'})
                 } else if (notify) {
+                    // Format and display the error message
+                    var errorMessage = self.format_errors(result['errors']);
+                    $('#poll-error-message', element).html(errorMessage);
+                    $('#poll-error-container', element).show();
+                    
                     runtime.notify('error', {
                         'title': 'Error saving poll',
-                        'message': self.format_errors(result['errors'])
+                        'message': errorMessage
                     });
                 }
             }