FOUR-18184:Add the component auto save instead the notification in Web

resources/js/tasks/components/TaskSaveNotification.vue

@@ -1,26 +1,35 @@
 <template>
   <div>
-    <div
-      class="btn text-black text-capitalize cursor-default"
-    >
+    <div class="btn text-black text-capitalize cursor-default">
       <div class="toolbar-item d-flex align-items-center">
-        <span>
+        <div class="save-date">
+          <span
+            v-if="size === 0"
+            class="autosave-draft-date"
+          >
+            {{ date }}
+          </span>
           <FontAwesomeIcon
             v-if="task.draft"
             :class="{ 'text-success': !error, 'text-secondary': error }"
             :icon="icon"
             :spin="isLoading"
           />
-        </span>
+          <span
+            v-if="size === 0"
+            class="autosave-draft-date"
+          >
+            {{ $t("Saved") }}
+          </span>
+        </div>
         <span
           id="saved-status"
           class="element-name truncate-text"
           :style="{
             maxWidth: `${size}px`
           }"
           v-html="sanitizeHtml(task.element_name)"
-        >
-        </span>
+        />
       </div>
     </div>
     <b-tooltip
@@ -32,11 +41,22 @@
         {{ task.process_request.case_title }}
       </div>
       <div class="tooltip-draft-date">
-        <FontAwesomeIcon v-if="!error" class="text-success" :icon="savedIcon" />
-        {{ $t('Last Autosave: ')+date }}
+        <FontAwesomeIcon
+          v-if="!error"
+          class="text-success"
+          :icon="savedIcon"
+        />
+        {{ $t('Last Autosave: ') + date }}
       </div>
-      <div v-if="error" class="tooltip-draft-error">
-        <FontAwesomeIcon v-if="error" class="text-secondary" :icon="errorIcon " />
+      <div
+        v-if="error"
+        class="tooltip-draft-error"
+      >
+        <FontAwesomeIcon
+          v-if="error"
+          class="text-secondary"
+          :icon="errorIcon "
+        />
         <span>{{ $t('Unable to save. Verify your internet connection.') }}
         </span>
       </div>
@@ -124,14 +144,14 @@ export default {
       return this.removeScriptsHtml(html);
     },
     removeScriptsHtml(input) {
-      const doc = new DOMParser().parseFromString(input, 'text/html');
+      const doc = new DOMParser().parseFromString(input, "text/html");
 
-      const scripts = doc.querySelectorAll('script');
+      const scripts = doc.querySelectorAll("script");
       scripts.forEach((script) => {
         script.remove();
       });
 
-      const styles = doc.querySelectorAll('style');
+      const styles = doc.querySelectorAll("style");
       styles.forEach((style) => {
         style.remove();
       });
@@ -194,4 +214,9 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.save-date {
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
 </style>

resources/js/tasks/show.js

@@ -13,6 +13,7 @@ import TasksList from "./components/TasksList.vue";
 import TaskSavePanel from "./components/TaskSavePanel.vue";
 import autosaveMixins from "../modules/autosave/autosaveMixin";
 import draftFileUploadMixin from "../modules/autosave/draftFileUploadMixin";
+import TaskSaveNotification from "./components/TaskSaveNotification.vue";
 
 Vue.use(Vuex);
 Vue.use("task", Task);
@@ -25,6 +26,7 @@ Vue.component("TimelineItem", TimelineItem);
 Vue.component("QuickFillPreview", QuickFillPreview);
 Vue.component("TasksList", TasksList);
 Vue.component("TaskSavePanel", TaskSavePanel);
+Vue.component("TaskSaveNotification", TaskSaveNotification);
 
 Vue.mixin(autosaveMixins);
 Vue.mixin(draftFileUploadMixin);

resources/views/tasks/edit.blade.php

@@ -146,7 +146,15 @@ class="btn d-block mr-0 ml-auto button-collapse"
                         <div class="card collapse-content">
                           <ul class="list-group list-group-flush w-100">
                             <li class="list-group-item">
-                              <!-- ADD THE OTHER BUTTONS -->
+                            <div class="row justify-content-start pb-1">
+                              <task-save-notification
+                                :options="options"
+                                :task="task"
+                                :date="lastAutosaveNav"
+                                :error="errorAutosave"
+                                :form-data="formData"
+                              />
+                            </div>
                               <div class="row button-group">
                                 <div class="col-6">
                                   <button
@@ -435,6 +443,7 @@ class="multiselect__tag-icon"></i>
             is_loading: false,
           },
           lastAutosave: "-",
+          lastAutosaveNav: "-",
           errorAutosave: false,
           formDataWatcherActive: true,
           showTabs: true,
@@ -453,8 +462,10 @@ class="multiselect__tag-icon"></i>
               }
               if (task.draft) {
                 this.lastAutosave = moment(task.draft.updated_at).format("DD MMMM YYYY | HH:mm");
+                this.lastAutosaveNav = moment(task.draft.updated_at).format("MMM DD, YYYY / HH:mm");
               } else {
                 this.lastAutosave = "-";
+                this.lastAutosaveNav = "-"
               }
             }
           },
@@ -704,7 +715,6 @@ class="multiselect__tag-icon"></i>
               return ProcessMaker.apiClient
               .put("drafts/" + this.task.id, draftData)
               .then((response) => {
-                ProcessMaker.alert(this.$t('Saved'), 'success')
                 this.task.draft = _.merge(
                   {},
                   this.task.draft,