Merge pull request #2257 from citizenos/feature/drafts-autosaving

add autosave drafts

Author: ilmartyrk

src/app/ideation/components/add-idea/add-idea.component.html

@@ -35,7 +35,22 @@
 >
   <div id="post_idea_form_wrap">
     <div class="form_header">
-      <span translate="COMPONENTS.ADD_IDEA.FOOTER_FORM_TITLE"></span>
+      <div class="form_header_title">
+        <span translate="COMPONENTS.ADD_IDEA.FOOTER_FORM_TITLE"></span>
+        <div class="dialog_info_wrap" *ngIf="isAutosaving">
+          <div class="dialog_info discussion">
+            <div class="row">
+              <div class="loader_wrapper">
+                <div class="loader"></div>
+              </div>
+              <span class="bold loader_text">{{
+                "COMPONENTS.IDEA_DIALOG.AUTOSAVING" | translate
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div
         *ngIf="ideation.allowAnonymous"
         id="anonymous_info_wrap"
@@ -155,11 +170,18 @@
                               | translate
                           }}</span
                         >
-                        <span *ngIf="filtersData['residence'].selectedValue !== 'other'; else other_option">{{
-                          filtersData["residence"].selectedValue
-                        }}</span>
+                        <span
+                          *ngIf="
+                            filtersData['residence'].selectedValue !== 'other';
+                            else other_option
+                          "
+                          >{{ filtersData["residence"].selectedValue }}</span
+                        >
                         <ng-template #other_option>
-                          <span>{{ 'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER' | translate }}</span>
+                          <span>{{
+                            "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER"
+                              | translate
+                          }}</span>
                         </ng-template>
                       </div>
                       <svg
@@ -193,7 +215,10 @@
                         class="option"
                         (click)="setFilterValue('residence', 'other')"
                       >
-                        <span>{{ 'VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER' | translate }}</span>
+                        <span>{{
+                          "VIEWS.IDEATION_CREATE.DEMOGRAPHICS_DATA_RESIDENCE_OTHER"
+                            | translate
+                        }}</span>
                       </div>
                     </div>
                   </div>
@@ -210,7 +235,9 @@
                         | translate
                     }}"
                     class="gray_borders"
-                    (ngModelChange)="ngModelChange('demographics_' + key, $event)"
+                    (ngModelChange)="
+                      ngModelChange('demographics_' + key, $event)
+                    "
                     (blur)="ngModelBlur('demographics_' + key)"
                   />
 
@@ -507,7 +534,7 @@
     </form>
   </div>
   <div id="buttons_row">
-    <div id="close_create">
+    <div id="navigate_create">
       <button
         class="btn_medium_submit_ghost icon close_button"
         (click)="close()"
@@ -525,6 +552,31 @@
           />
         </svg>
       </button>
+      <div class="btn_medium_wrapper" *ngIf="!!autosavedIdea">
+        <button
+          class="option error_text btn_medium_error"
+          (click)="deleteDraftIdea(autosavedIdea)"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M10 3H6V4H10V3ZM11 4V3C11 2.44772 10.5523 2 10 2H6C5.44772 2 5 2.44772 5 3V4H4H2.5C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H4V13C4 13.5523 4.44772 14 5 14H11C11.5523 14 12 13.5523 12 13V5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H12H11ZM7 7H6V11H7V7ZM10 7H9V11H10V7Z"
+              fill="#2C3B47"
+            />
+          </svg>
+          <span
+            class="btn_text"
+            translate="COMPONENTS.ADD_IDEA.BTN_DELETE_DRAFT"
+          ></span>
+        </button>
+      </div>
     </div>
     <div id="navigate_create">
       <!--div id="chars_left" translate="COMPONENTS.ADD_IDEA.IDEA_TYPE_CHARACTERS_LEFT"
@@ -553,12 +605,6 @@
         </svg>
         <span translate="COMPONENTS.POST_ARGUMENT.BTN_ADD_IMAGE"></span>
       </button>
-      <button class="btn_medium_secondary icon" (click)="draftIdea()">
-        <span
-          class="btn_text"
-          translate="COMPONENTS.ADD_IDEA.BTN_IDEA_DRAFT"
-        ></span>
-      </button>
       <button class="btn_medium_submit icon" (click)="publishIdea()">
         <span
           class="btn_text"

src/app/ideation/components/add-idea/add-idea.component.scss

@@ -91,12 +91,31 @@
     align-items: center;
 
     @include mixins.mobile {
+      flex-direction: column;
+      gap: 8px;
+
+      #navigate_create:first-child {
+        order: 2;
+
+        .btn_medium_wrapper {
+          width: 100%;
+          padding-top: 16px;
+          margin-top: 8px;
+          border-top: 1px solid var(--color-border);
+        }
+      }
+
+      #navigate_create:last-child {
+        order: 1;
+      }
+
       .close_button {
         display: none;
       }
       .btn_medium_secondary,
       .btn_medium_submit,
-      .btn_medium_submit_ghost {
+      .btn_medium_submit_ghost,
+      .btn_medium_error {
         width: 100%;
       }
     }
@@ -209,6 +228,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  .form_header_title {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
 }
 #anonymous_info_wrap {
   display: flex;