Merge pull request #8875 from ProcessMaker/feature/FOUR-31831

feat(FOUR-31831): review Improve Task page loading

Author: caleeli

ProcessMaker/Http/Controllers/TaskController.php

@@ -108,13 +108,16 @@ public function edit(ProcessRequestToken $task, string $preview = '')
     {
         $task = $task->loadTokenInstance();
         $dataManager = new DataManager();
-        $userHasComments = Comment::where('commentable_type', ProcessRequestToken::class)
-                                    ->where('commentable_id', $task->id)
-                                    ->where('body', 'like', '%{{' . \Auth::user()->id . '}}%')
-                                    ->count() > 0;
 
-        if (!\Auth::user()->can('update', $task) && !$userHasComments) {
-            $this->authorize('update', $task);
+        if (!\Auth::user()->can('update', $task)) {
+            $userHasComments = Comment::where('commentable_type', ProcessRequestToken::class)
+                                        ->where('commentable_id', $task->id)
+                                        ->where('body', 'like', '%{{' . \Auth::user()->id . '}}%')
+                                        ->count() > 0;
+
+            if (!$userHasComments) {
+                $this->authorize('update', $task);
+            }
         }
 
         //Mark notification as read
@@ -178,7 +181,9 @@ public function edit(ProcessRequestToken $task, string $preview = '')
                 ]);
             }
 
-            UserResourceView::setViewed(Auth::user(), $task);
+            dispatch(function () use ($task) {
+                UserResourceView::setViewed(Auth::user(), $task);
+            })->afterResponse();
             $currentUser = Auth::user()->only([
                 'id',
                 'username',
@@ -189,7 +194,8 @@ public function edit(ProcessRequestToken $task, string $preview = '')
                 'timezone',
                 'datetime_format',
             ]);
-            $userConfiguration = (new UserConfigurationController())->index();
+            //$userConfiguration = (new UserConfigurationController())->index();
+            $userConfiguration = app(UserConfigurationController::class)->index();
             $hitlEnabled = config('smart-extract.hitl_enabled', false) && $isSmartExtractTask;
 
             // Build the iframe source
@@ -209,9 +215,11 @@ public function edit(ProcessRequestToken $task, string $preview = '')
                     $iframeSrc = $dashboardUrl . '?' . $queryParams;
                 }
             }
+            $canUpdateTask = Auth::user()->can('update', $task);
 
             return view('tasks.edit', [
                 'task' => $task,
+                'canUpdateTask' => $canUpdateTask,
                 'dueLabels' => self::$dueLabels,
                 'manager' => $manager,
                 'submitUrl' => $submitUrl,

resources/js/tasks/edit.js

@@ -64,6 +64,10 @@ const main = new Vue({
     userConfiguration,
     urlConfiguration: "users/configuration",
     showTabs: true,
+    loadedTabs: {
+      form: true,
+      data: false,
+    },
   },
   computed: {
     taskDefinitionConfig() {
@@ -172,6 +176,14 @@ const main = new Vue({
     this.setAllowReassignment();
   },
   methods: {
+    openDataTab() {
+      if (!this.loadedTabs.data) {
+        this.loadedTabs.data = true;
+      }
+      this.$nextTick(() => {
+        this.resizeMonaco();
+      });
+    },
     defineUserConfiguration() {
       this.userConfiguration = JSON.parse(this.userConfiguration.ui_configuration);
       this.showMenu = this.userConfiguration.tasks.isMenuCollapse;
@@ -288,8 +300,13 @@ const main = new Vue({
     },
     resizeMonaco() {
       this.showTree = false;
-      const editor = this.$refs.monaco.getMonaco();
-      editor.layout({ height: window.innerHeight * 0.65 });
+      const editor = this.$refs.monaco?.getMonaco?.();
+      if (!editor) {
+        return;
+      }
+      editor.layout({
+        height: window.innerHeight * 0.65,
+      });
     },
     prepareData() {
       this.updateRequestData = debounce(this.updateRequestData, 1000);

resources/views/layouts/layoutnext.blade.php

@@ -95,6 +95,7 @@
         {!! config('global_header') !!}
         <!-- End Global Header -->
     @endif
+    @stack('preload')
 </head>
 <body>
 <a class="skip-navigation alert alert-info" role="link" href="#main" tabindex="1">@{{ __('Skip to Content') }}</a>

resources/views/tasks/edit.blade.php

@@ -27,6 +27,14 @@ function() use ($task) {
       ], 'attributes' => 'v-cloak'])
 @endsection
 @section('content')
+@push('preload')
+  <link rel="preload" href="{{ mix('js/manifest.js') }}" as="script">
+  <link rel="preload" href="{{ mix('js/vue-vendor.js') }}" as="script">
+  <link rel="preload" href="{{ mix('js/bootstrap-vendor.js') }}" as="script">
+  <link rel="preload" href="{{ mix('js/fortawesome-vendor.js') }}" as="script">
+  <link rel="preload" href="{{ mix('js/tasks/loaderEdit.js') }}" as="script">
+  <link rel="preload" href="{{ mix('js/tasks/edit.js') }}" as="script">
+@endpush
 <div
   id="task"
   v-cloak
@@ -77,7 +85,7 @@ class="nav-link active">
                     role="tab"
                     aria-controls="tab-data"
                     aria-selected="false"
-                    @click="resizeMonaco"
+                    @click="openDataTab"
                     class="nav-link">
                     {{__('Data')}}
                   </a>
@@ -86,7 +94,7 @@ class="nav-link">
             @endcan
             <div id="tabContent" class="tab-content tw-flex tw-flex-col tw-grow tw-overflow-y-scroll">
               <div id="tab-form" role="tabpanel" aria-labelledby="tab-form" class="tab-pane active show">
-                @can('update', $task)
+                @if($canUpdateTask)
                   @unless($hitlEnabled)
                   <span v-if="tceEnableCaseNumberScreen" class="tw-block tw-gap-2 tw-mb-0 tw-px-2 tw-bg-white tw-border-l tw-border-l-[#d7dde5] tw-border-r tw-border-r-[#d7dde5]" v-cloak>
                     <span class="tw-font-medium tw-text-[#728092] tw-text-xs">Case #:</span> <span class="tw-font-normal tw-text-[#9fa8b5] tw-text-xs">{{ $caseNumber }}</span>
@@ -113,7 +121,7 @@ class="card border-0"
                   @else
                     @include('tasks.partials.hitl-iframe', ['iframeSrc' => $iframeSrc ?? null])
                   @endunless
-                @endcan
+                @endif
                 <div v-if="taskHasComments">
                   <timeline :commentable_id="task.id"
                     commentable_type="ProcessMaker\Models\ProcessRequestToken"
@@ -126,6 +134,7 @@ class="card border-0"
               <div v-if="task.process_request.status === 'ACTIVE'" id="tab-data" role="tabpanel" aria-labelledby="tab-data" class="card card-body border-top-0 tab-pane p-3">
                 <!-- data edit -->
                   <monaco-editor
+                      v-if="loadedTabs.data"
                       v-show="!showTree"
                       ref="monaco"
                       data-cy="editorViewFrame"
@@ -437,8 +446,9 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
     );
 
     const task = @json($task);
+    
     let draftTask = task.draft;
-    const userHasAccessToTask = {{ Auth::user()->can('update', $task) ? "true": "false" }};
+    const userHasAccessToTask = @json($canUpdateTask);
     const userIsAdmin = {{ Auth::user()->is_administrator ? "true": "false" }};
     const userIsProcessManager = {{ in_array(Auth::user()->id, $task->process?->manager_id ?? []) ? "true": "false" }};
     const caseNumber = @json($caseNumber);