Added a task form autosave with delays

gustavobascope · gustavobascope · commit a5461fb891f6 · 2024-03-05T18:28:45.000-04:00
diff --git a/ProcessMaker/Http/Controllers/Api/TaskDraftController.php b/ProcessMaker/Http/Controllers/Api/TaskDraftController.php
@@ -7,14 +7,16 @@
 use ProcessMaker\Http\Resources\ApiCollection;
 use ProcessMaker\Http\Resources\ApiResource;
 use ProcessMaker\Models\TaskDraft;
+use ProcessMaker\Models\ProcessRequestToken;
+use Illuminate\Support\Arr;
 
 class TaskDraftController extends Controller
 {
     public function update(Request $request, ProcessRequestToken $task)
     {
         $search = ['task_id' => $task->id];
-
-        $draft = TaskDraft::updateOrCreate($search, $request);
+        $filteredData = Arr::except($request->all(), ['_user', '_request']);
+        $draft = TaskDraft::updateOrCreate($search,['data' => $filteredData]);
 
         return new ApiResource($draft);
     }
diff --git a/ProcessMaker/Models/TaskDraft.php b/ProcessMaker/Models/TaskDraft.php
@@ -15,6 +15,11 @@ class TaskDraft extends ProcessMakerModel
         'created_at',
     ];
 
+    protected $fillable = [
+        'task_id',
+        'data',
+    ];
+
     protected $casts = [
         'data' => 'array',
     ];
diff --git a/resources/js/tasks/show.js b/resources/js/tasks/show.js
@@ -8,6 +8,7 @@ import NavbarTaskMobile from "./components/NavbarTaskMobile.vue";
 import AvatarImage from "../components/AvatarImage.vue";
 import Timeline from "../components/Timeline.vue";
 import TimelineItem from "../components/TimelineItem.vue";
+import autosaveMixins from "../modules/autosave/autosaveMixin";
 
 Vue.use(Vuex);
 Vue.use("task", Task);
@@ -18,5 +19,7 @@ Vue.component("MonacoEditor", MonacoEditor);
 Vue.component("Timeline", Timeline);
 Vue.component("TimelineItem", TimelineItem);
 
+Vue.mixin(autosaveMixins);
+
 window.debounce = debounce;
 window.Vuex = Vuex;
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
@@ -64,7 +64,7 @@ class="card border-0"
                               @@error="error"
                               @closed="closed"
                               @redirect="redirectToTask"
-                              @form-data-changed="autoSave"
+                              @form-data-changed="handleAutosave()"
                           ></task>
                           @endcan
                           <div v-if="taskHasComments">
@@ -269,6 +269,8 @@ class="d-inline-flex pull-left align-items-center"
           userIsAdmin,
           userIsProcessManager,
           showTree: false,
+          is_loading: false,
+          autoSaveDelay: 5000,
         },
         watch: {
           task: {
@@ -460,8 +462,15 @@ class="d-inline-flex pull-left align-items-center"
           taskUpdated(task) {
             this.task = task;
           },
-          autoSave(formData) {
-            console.log("Hola", formData);
+          autosaveApiCall() {
+            return ProcessMaker.apiClient
+            .put("drafts/" + this.task.id, this.formData)
+            .then(() => {
+              this.is_loading = true;
+            })
+            .finally(() => {
+              this.is_loading = false;
+            });
           },
         },
         mounted() {
diff --git a/resources/views/tasks/preview.blade.php b/resources/views/tasks/preview.blade.php
@@ -107,7 +107,7 @@ class="card border-0"
                           @@error="error"
                           @closed="closed"
                           @redirect="redirectToTask"
-                          @form-data-changed="autoSave"
+                          @form-data-changed="handleAutosave()"
                           :task-preview="true"
                         ></task>
                     </div>
@@ -184,6 +184,8 @@ class="card border-0"
           submitting: false,
           userIsAdmin,
           userIsProcessManager,
+          is_loading: false,
+          autoSaveDelay: 5000,
         },
         watch: {
           task: {
@@ -375,8 +377,15 @@ class="card border-0"
           taskUpdated(task) {
             this.task = task;
           },
-          autoSave(formData) {
-            console.log("Hola", formData);
+          autosaveApiCall() {
+            return ProcessMaker.apiClient
+            .put("drafts/" + this.task.id, this.formData)
+            .then(() => {
+              this.is_loading = true;
+            })
+            .finally(() => {
+              this.is_loading = false;
+            });
           },
         },
         mounted() {

Original file line number	Diff line number	Diff line change
`@@ -7,14 +7,16 @@`
`7`	`7`	`use ProcessMaker\Http\Resources\ApiCollection;`
`8`	`8`	`use ProcessMaker\Http\Resources\ApiResource;`
`9`	`9`	`use ProcessMaker\Models\TaskDraft;`
	`10`	`+use ProcessMaker\Models\ProcessRequestToken;`
	`11`	`+use Illuminate\Support\Arr;`
`10`	`12`
`11`	`13`	`class TaskDraftController extends Controller`
`12`	`14`	`{`
`13`	`15`	`public function update(Request $request, ProcessRequestToken $task)`
`14`	`16`	`{`
`15`	`17`	`$search = ['task_id' => $task->id];`
`16`		`-`
`17`		`- $draft = TaskDraft::updateOrCreate($search, $request);`
	`18`	`+ $filteredData = Arr::except($request->all(), ['_user', '_request']);`
	`19`	`+ $draft = TaskDraft::updateOrCreate($search,['data' => $filteredData]);`
`18`	`20`
`19`	`21`	`return new ApiResource($draft);`
`20`	`22`	`}`