FOUR-20583: Tasks Main change to new layout , adjustments in typeForm…

….js and typeDisplay.js
ryancooley · Jan 23, 2025 · Dec 5, 2024 · Dec 6, 2024 · Dec 6, 2024 · Dec 6, 2024
commit 8428fe37d74fc2c3d07192541fbec3fd17002129
diff --git a/resources/js/processes/screen-builder/typeDisplay.js b/resources/js/processes/screen-builder/typeDisplay.js
@@ -1,42 +1,39 @@
-import { renderer, FormBuilderControls, globalProperties } from "@processmaker/screen-builder";
 import formTypes from "./formTypes";
 
-const {
-  FormText,
-} = renderer;
+ProcessMaker.EventBus.$on("screen-builder-init", (manager) => {
+  const { FormBuilderControls, globalProperties } = window.ScreenBuilder;
 
-const TableControl = FormBuilderControls.find((control) => control.rendererBinding === "FormMultiColumn");
-const RichTextControl = FormBuilderControls.find((control) => control.rendererBinding === "FormHtmlEditor");
-const FormRecordList = FormBuilderControls.find((control) => control.rendererBinding === "FormRecordList");
-const FormImage = FormBuilderControls.find((control) => control.rendererBinding === "FormImage");
-const FormAvatar = FormBuilderControls.find((control) => control.rendererBinding === "FormAvatar");
-const FormLoop = FormBuilderControls.find((control) => control.rendererBinding === "FormLoop");
-const FormNestedScreen = FormBuilderControls.find((control) => control.rendererBinding === "FormNestedScreen");
-const FileDownloadControl = FormBuilderControls.find((control) => control.builderBinding === "FileDownload");
-const FormListTable = FormBuilderControls.find((control) => control.rendererBinding === "FormListTable");
-const FormAnalyticsChart = FormBuilderControls.find((control) => control.rendererBinding === "FormAnalyticsChart");
-const FormCollectionViewControl = FormBuilderControls.find((control) => control.rendererBinding === "FormCollectionViewControl");
-// Remove editable inspector props
-FormRecordList.control.inspector = FormRecordList.control.inspector.filter((prop) => prop.field !== "editable" && prop.field !== "form");
+  const TableControl = FormBuilderControls.find((control) => control.rendererBinding === "FormMultiColumn");
+  const RichTextControl = FormBuilderControls.find((control) => control.rendererBinding === "FormHtmlEditor");
+  const FormRecordList = FormBuilderControls.find((control) => control.rendererBinding === "FormRecordList");
+  const FormImage = FormBuilderControls.find((control) => control.rendererBinding === "FormImage");
+  const FormAvatar = FormBuilderControls.find((control) => control.rendererBinding === "FormAvatar");
+  const FormLoop = FormBuilderControls.find((control) => control.rendererBinding === "FormLoop");
+  const FormNestedScreen = FormBuilderControls.find((control) => control.rendererBinding === "FormNestedScreen");
+  const FileDownloadControl = FormBuilderControls.find((control) => control.builderBinding === "FileDownload");
+  const FormListTable = FormBuilderControls.find((control) => control.rendererBinding === "FormListTable");
+  const FormAnalyticsChart = FormBuilderControls.find((control) => control.rendererBinding === "FormAnalyticsChart");
+  const FormCollectionViewControl = FormBuilderControls.find((control) => control.rendererBinding === "FormCollectionViewControl");
+  // Remove editable inspector props
+  FormRecordList.control.inspector = FormRecordList.control.inspector.filter((prop) => prop.field !== "editable" && prop.field !== "form");
 
-// Modify record list description when used in a display screen
-FormRecordList.control.popoverContent = "Format content in a table structure";
+  // Modify record list description when used in a display screen
+  FormRecordList.control.popoverContent = "Format content in a table structure";
 
-const controlsDisplay = [
-  RichTextControl,
-  TableControl,
-  FormRecordList,
-  FormImage,
-  FormAvatar,
-  FormLoop,
-  FormNestedScreen,
-  FileDownloadControl,
-  FormListTable,
-  FormAnalyticsChart,
-  FormCollectionViewControl
-];
+  const controlsDisplay = [
+    RichTextControl,
+    TableControl,
+    FormRecordList,
+    FormImage,
+    FormAvatar,
+    FormLoop,
+    FormNestedScreen,
+    FileDownloadControl,
+    FormListTable,
+    FormAnalyticsChart,
+    FormCollectionViewControl,
+  ];
 
-ProcessMaker.EventBus.$on("screen-builder-init", (manager) => {
   controlsDisplay.forEach((item) => {
     item.control.inspector.push(...globalProperties[0].inspector);
     manager.type = formTypes.display;

diff --git a/resources/js/processes/screen-builder/typeForm.js b/resources/js/processes/screen-builder/typeForm.js
@@ -1,12 +1,12 @@
-const { FormBuilderControls, globalProperties } = window.ScreenBuilder;
-const initialControls = FormBuilderControls;
-// The submit button has by default the 'submit' value
-const submitButton = initialControls.find((x) => x.control.label === "Submit");
-if (submitButton) {
-  submitButton.control.config.fieldValue = "submit";
-}
-
 ProcessMaker.EventBus.$on("screen-builder-init", (manager) => {
+  const { FormBuilderControls, globalProperties } = window.ScreenBuilder;
+  const initialControls = FormBuilderControls;
+  // The submit button has by default the 'submit' value
+  const submitButton = initialControls.find((x) => x.control.label === "Submit");
+  if (submitButton) {
+    submitButton.control.config.fieldValue = "submit";
+  }
+
   initialControls.forEach((config) => {
     config.control.inspector.push(...globalProperties[0].inspector);
 

diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
@@ -44,9 +44,9 @@ class="alert alert-primary"
             <button 
               type="button"
               class="btn btn-primary"
-              @click="claimTask">@{$t('Claim Task')}}
+              @click="claimTask">{{__('Claim Task')}}
             </button>
-            @{{$t('This task is unassigned, click Claim Task to assign yourself.')}}
+            {{__('This task is unassigned, click Claim Task to assign yourself.')}}
           </div>
           <div
             id="interactionListener"
@@ -66,7 +66,7 @@ class="nav nav-tabs">
                     aria-controls="tab-form"
                     aria-selected="true"
                     class="nav-link active">
-                    @{{$t('Form')}}
+                    {{__('Form')}}
                   </a>
                 </li>
                 <li class="nav-item">
@@ -79,7 +79,7 @@ class="nav-link active">
                     aria-selected="false"
                     @click="resizeMonaco"
                     class="nav-link">
-                    @{{$t('Data')}}
+                    {{__('Data')}}
                   </a>
                 </li>
               </ul>
@@ -142,7 +142,6 @@ class="card border-0"
                           </button>
                       </span>
                   </div>
-
               </div>
               @endcan
             </div>
@@ -167,7 +166,7 @@ class="card border-0"
                 aria-controls="details"
                 aria-selected="true"
                 @click="switchTabInfo('details')">
-                @{{ $t('Details') }}
+                {{ __('Details') }}
               </button>
             </li>
             <li class="nav-item" role="presentation">
@@ -181,7 +180,7 @@ class="card border-0"
                 aria-controls="comments"
                 aria-selected="false"
                 @click="switchTabInfo('comments')">
-                @{{ $t('Comments') }}
+                {{ __('Comments') }}
               </button>
             </li>
           </ul>
@@ -213,7 +212,7 @@ class="row justify-content-start pb-1">
                               type="button"
                               class="btn btn-block button-actions"
                               @click="createRule">
-                              <i class="fas fa-plus"></i> @{{ $t('Create Rule') }}
+                              <i class="fas fa-plus"></i> {{ __('Create Rule') }}
                             </button>
                           </div>
                           <div class="col-6">
@@ -229,7 +228,7 @@ class="btn btn-block button-actions"
                                           : '/img/priority-header.svg'
                                       "
                                 :alt="$t('No Image')">
-                              @{{ $t('Priority') }}
+                              {{ __('Priority') }}
                             </button>
                           </div>
                         </div>
@@ -243,7 +242,7 @@ class="btn btn-block button-actions"
                                 @click="showQuickFill">
                                 <img
                                   src="../../img/smartinbox-images/fill.svg"
-                                  :alt="$t('No Image')" /> @{{$t('Quick Fill')}}
+                                  :alt="$t('No Image')" /> {{__('Quick Fill')}}
                               </button>
                             </template>
                           </div>
@@ -254,7 +253,7 @@ class="btn btn-block button-actions"
                                 type="button"
                                 class="btn btn-block button-actions"
                                 @click="show">
-                                <i class="fas fa-user-friends"></i> @{{$t('Reassign')}}
+                                <i class="fas fa-user-friends"></i> {{__('Reassign')}}
                               </button>
                             </template>
                           </div>
@@ -268,7 +267,7 @@ class="btn btn-block button-actions"
                           @click="eraseDraft()"
                           v-if="taskDraftsEnabled">
                           <img src="/img/smartinbox-images/eraser.svg" :alt="$t('No Image')">
-                          @{{ $t('Clear Draft') }}
+                          {{ __('Clear Draft') }}
                         </button>
                       </li>
                       <div :class="statusCard">
@@ -290,7 +289,7 @@ class="btn btn-block button-actions"
                           :error="errorAutosave" />
                       </li>
                       <li v-if="task.is_self_service === 0" class="list-group-item">
-                        <p class="section-title">@{{$t('Assigned To')}}:</p>
+                        <p class="section-title">{{__('Assigned To')}}:</p>
                         <avatar-image
                           v-if="task.user"
                           size="32"
@@ -307,30 +306,30 @@ class="d-inline-flex pull-left align-items-center"
                         @{{ moment(createdAt).format() }}
                       </li>
                       <li class="list-group-item">
-                        <p class="section-title">@{{$t('Case')}}</p>
+                        <p class="section-title">{{__('Case')}}</p>
                         @{{ caseTitle }}
                         <p class="launchpad-link">
                           <a href="{{route('process.browser.index', [$task->process->id])}}">
-                            @{{ $t('Open Process Launchpad') }}
+                            {{ __('Open Process Launchpad') }}
                           </a>
                         </p>
                       </li>
                       <li class="list-group-item">
-                        <p class="section-title">@{{$t('Request')}}</p>
+                        <p class="section-title">{{__('Request')}}</p>
                         <a href="{{route('requests.show', [$task->process_request_id, 'skipInterstitial' => '1'])}}"
                           data-test="request-link"
                         >
                           #{{$task->process_request_id}} {{$task->process->name}}
                         </a>
                       </li>
                       <li class="list-group-item">
-                        <p class="section-title">@{{$t('Requested By')}}:</p>
+                        <p class="section-title">{{__('Requested By')}}:</p>
                         <avatar-image
                           v-if="task.requestor"
                           size="32"
                           class="d-inline-flex pull-left align-items-center"
                           :input-data="task.requestor"></avatar-image>
-                        <p v-if="!task.requestor">@{{$t('Web Entry')}}</p>
+                        <p v-if="!task.requestor">{{__('Web Entry')}}</p>
                       </li>
                     </ul>
                   </div>
@@ -380,10 +379,10 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
             </div>
             <div slot="modal-footer">
               <button type="button" class="btn btn-outline-secondary" @click="cancelReassign">
-                @{{$t('Cancel')}}
+                {{__('Cancel')}}
               </button>
               <button type="button" class="btn btn-secondary" @click="reassignUser(true)" :disabled="disabled">
-                @{{$t('Reassign')}}
+                {{__('Reassign')}}
               </button>
             </div>
           </b-modal>
@@ -437,15 +436,11 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
   </script>
 
 
+  @foreach(GlobalScripts::getScripts() as $script)
+    <script src="{{$script}}"></script>
+  @endforeach
 
-    @foreach(GlobalScripts::getScripts() as $script)
-      <script src="{{$script}}"></script>
-    @endforeach
-
-    <script src="{{mix('js/tasks/edit.js')}}"></script>
-
-
-
+  <script src="{{mix('js/tasks/edit.js')}}"></script>
 @endsection
 
 @section('css')