From 9b39f1e50d326a7e6a75b8343aea6aed02bfda82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Moroz?= <michalmoroz@gmail.com>
Date: Sun, 6 Oct 2024 23:15:38 +0200
Subject: [PATCH] feat: add Save and go back button

---
 tasks/apps/tree/views.py                   |  5 +-
 tasks/assets/styles/example.scss           | 74 ++++++++++++++++------
 tasks/templates/tree/observation_edit.html | 29 +++++----
 3 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/tasks/apps/tree/views.py b/tasks/apps/tree/views.py
index 577cfc1..f6e5639 100644
--- a/tasks/apps/tree/views.py
+++ b/tasks/apps/tree/views.py
@@ -596,7 +596,10 @@ def observation_edit(request, observation_id=None):
                         update.published = now
                     update.save()
 
-            return redirect(reverse('public-observation-list'))
+            if 'save_and_close' in request.POST:
+                return redirect(reverse('public-observation-list'))
+
+            return redirect(reverse('public-observation-edit', args=[observation.pk]))
 
     else:
         initial_dict = {}
diff --git a/tasks/assets/styles/example.scss b/tasks/assets/styles/example.scss
index a0e9692..dc16686 100644
--- a/tasks/assets/styles/example.scss
+++ b/tasks/assets/styles/example.scss
@@ -886,30 +886,66 @@ article.quest {
     }
 
     div.submit {
-        margin: 2rem 0;
+        margin: 2rem 0 4rem;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: space-between;
+        
+        .submit-buttons {
+            display: flex;
+            gap: 1rem;
+            flex-direction: row-reverse;
+        }
+
     }
 
-    button.submit {
-        font-family: Raleway, sans-serif;
-        font-weight: 700;
-        color: #fff;
-        background-color: #205e7d;
-        padding: 10px 30px;
-        border: 2px solid color.adjust(#205e7d, $lightness: -10%);
-        border-radius: 10px;
-        transform: translateY(0);
-        display: flex;
-        flex-direction: row;
-        align-items: center;
+    button.submit, button.close {
+        font-family: 'Raleway', sans-serif;
+        display: inline-block;
+        padding: 0.75em 1.5em;
+        font-size: 1rem;
+        text-align: center;
+        text-decoration: none;
+        color: #ffffff;
+        background-color: #1a5f8d;
+        border: none;
+        border-radius: 3px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
         cursor: pointer;
+        opacity: 0.8;
 
         &:hover {
-            transition : 1000ms;
-            padding: 10px 50px;
-            transform : translateY(-0px);
-            background-color: #fff;
-            color:  color.adjust(#205e7d, $lightness: -5%);
-            border: solid 2px color.adjust(#205e7d, $lightness: -10%);
+            background-color: darken(#1a5f8d, 10%);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+        }
+
+        &:active {
+            background-color: darken(#1a5f8d, 15%);
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+
+        &:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(26, 95, 141, 0.5), 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    button.close {
+        background-color: #808080;
+        color: #ffffff;
+        margin-right: 10px;
+
+        &:hover {
+            background-color: #666666;
+        }
+
+        &:active {
+            background-color: #595959;
+        }
+
+        &:focus {
+            box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.5);
         }
     }
 }
diff --git a/tasks/templates/tree/observation_edit.html b/tasks/templates/tree/observation_edit.html
index 6851b41..e813ffc 100644
--- a/tasks/templates/tree/observation_edit.html
+++ b/tasks/templates/tree/observation_edit.html
@@ -29,28 +29,29 @@
         <div class="left">
             <h3>Observation</h3>
             <p class="meta">Provide situation, then interpretation and approach.</p>
-            {{ form.as_p }}
-        
-            <div class="submit">
-                <button class="submit">Submit</button>
-                {% if instance.pk %}
-                <button class="close" hx-post="{% url 'public-observation-close' instance.pk %}">
-                    Close observation
-                </button>
-                {% endif %}
-            </div>            
+            {{ form.as_p }}     
         </div>
 
         <div class="right">
             <h3>Updates</h3>
             <p class="meta">Optional. All existing updates and up to 3 extra are here.</p>
             {{ formset }}
-
-            <div class="submit">
-                <button class="submit">Submit</button>
-            </div>
         </div>
     </div>
+    <div class="submit">
+        <div class="submit-buttons">
+            <button class="submit">Save</button>
+            <button class="submit" name="save_and_close">Save and go back</button>
+        </div>
+        
+        {% if instance.pk %}
+        <div class="close">
+            <button class="close" hx-post="{% url 'public-observation-close' instance.pk %}">
+                Close observation
+            </button>
+        </div>
+        {% endif %}
+    </div>
     <div class="updates">
         {% for event in events %}
             <div class="event">