Refactor to use mixin for preview

Author: nolanpro

resources/js/common/reassignMixin.js

@@ -0,0 +1,71 @@
+export default {
+  data() {
+    return {
+      selectedUser: null,
+      allowReassignment: false,
+      reassignUsers: [],
+    };
+  },
+  computed: {
+    currentTaskUserId() {
+      return this.task?.user_id ?? this.task?.user?.id;
+    }
+  },
+  methods: {
+    setAllowReassignment() {
+      if (!this.task?.id) {
+        return;
+      }
+      window.ProcessMaker.apiClient.get('tasks/user-can-reassign?tasks=' + this.task.id)
+        .then((response) => {
+          this.allowReassignment = response.data[this.task.id];
+        });
+    },
+    getReassignUsers(filter = null) {
+      const params = { };
+      if (filter) {
+        params.filter = filter;
+      }
+      if (this.task?.id) {
+        params.assignable_for_task_id = this.task.id;
+      }
+
+      ProcessMaker.apiClient.get('users_task_count', { params }).then(response => {
+        this.reassignUsers = [];
+        response.data.data.forEach((user) => {
+          if (this.currentTaskUserId === user.id) {
+            return;
+          }
+          this.reassignUsers.push({
+            text: user.fullname,
+            value: user.id,
+            active_tasks_count: user.active_tasks_count
+          });
+        });
+      });
+    },
+    onReassignInput: _.debounce(function (filter) {
+      this.getReassignUsers(filter);
+    }, 300),
+
+    reassignUser(redirect = false) {
+      if (this.selectedUser) {
+        ProcessMaker.apiClient
+          .put("tasks/" + this.task.id, {
+            user_id: this.selectedUser
+          })
+          .then(response => {
+            this.$emit("on-reassign-user", this.selectedUser);
+            this.showReassignment = false;
+            this.selectedUser = null;
+            if (redirect) {
+              this.redirect('/tasks');
+            }
+            if (this.showPreview) {
+              this.showPreview = false;
+            }
+          });
+      }
+    },
+  }
+}

resources/js/tasks/components/TasksPreview.vue

@@ -143,7 +143,7 @@
                     >
                   </b-button>
                   <b-button
-                    v-if="isAllowReassignment || isUserAdmin || isProcessManager"
+                    v-if="allowReassignment"
                     class="btn text-secondary icon-button"
                     variant="light"
                     :aria-label="$t('Reassign')"
@@ -187,16 +187,15 @@
             </div>
             <div class="flex-grow-1">
               <PMDropdownSuggest v-model="selectedUser"
-                                 :options="users"
-                                 @onInput="onInput"
-                                 @onSelectedOption="onSelectedOption"
+                                 :options="reassignUsers"
+                                 @onInput="onReassignInput"
                                  :placeholder="$t('Type here to search')">
                 <template v-slot:pre-text="{ option }">
-                  <b-badge variant="secondary" class="mr-2 custom-badges pl-2 pr-2 rounded-lg">{{ option.count }}</b-badge>
+                  <b-badge variant="secondary" class="mr-2 custom-badges pl-2 pr-2 rounded-lg">{{ option.active_tasks_count }}</b-badge>
                 </template>
               </PMDropdownSuggest>
             </div>
-            <button type="button" class="btn btn-primary btn-sm ml-2" @click="reassignUser" :disabled="disabled">
+            <button type="button" class="btn btn-primary btn-sm ml-2" @click="reassignUser(false)" :disabled="disabled">
               {{ $t('Assign') }}
             </button>
             <button type="button" class="btn btn-outline-secondary btn-sm ml-2" @click="cancelReassign">
@@ -263,15 +262,14 @@ import QuickFillPreview from "./QuickFillPreview.vue";
 import PreviewMixin from "./PreviewMixin";
 import autosaveMixins from "../../modules/autosave/autosaveMixin.js"
 import PMDropdownSuggest from "../../components/PMDropdownSuggest.vue";
+import reassignMixin from "../../common/reassignMixin";
 
 export default {
   components: { SplitpaneContainer, TaskLoading, QuickFillPreview, TaskSaveNotification, EllipsisMenu, PMDropdownSuggest },
-  mixins: [PreviewMixin, autosaveMixins],
+  mixins: [PreviewMixin, autosaveMixins, reassignMixin],
   props: ["tooltipButton", "propPreview"],
   data(){
     return {
-      selectedUser: null,
-      users: []
     };
   },
   watch: {
@@ -294,6 +292,7 @@ export default {
 
         if (task?.id !== previousTask?.id) {
           this.userHasInteracted = false;
+          this.setAllowReassignment();
         } 
       },
     },
@@ -328,24 +327,12 @@ export default {
     this.screenWidthPx = window.innerWidth;
     window.addEventListener('resize', this.updateScreenWidthPx);
     this.getUser();
-    this.getUsers("");
+    this.setAllowReassignment();
   },
   computed: {
     disabled() {
       return this.selectedUser ? false : true;
     },
-    isAllowReassignment() {
-      if (this.taskDefinition.definition) {
-        return this.taskDefinition.definition.allowReassignment === "true";
-      }
-      return false;
-    },
-    isUserAdmin() {
-      return this.user.is_administrator;
-    },
-    isProcessManager() {
-      return this.task.process_obj.properties.manager_id === ProcessMaker.user.id;
-    },
   },
   methods: {
     fillWithQuickFillData(data) {
@@ -416,26 +403,13 @@ export default {
           this.userHasInteracted = false;
         });
     },
-    reassignUser() {
-      if (this.selectedUser) {
-        ProcessMaker.apiClient
-          .put("tasks/" + this.task.id, {
-            user_id: this.selectedUser
-          })
-          .then(response => {
-            this.$emit("on-reassign-user", this.selectedUser);
-            this.showReassignment = false;
-            this.selectedUser = null;
-            this.getUsers("");
-          });
-      }
-    },
     cancelReassign() {
       this.showReassignment = false;
       this.selectedUser = null;
     },
     openReassignment() {
       this.showReassignment = !this.showReassignment;
+      this.getReassignUsers();
     },
     getTaskDefinitionForReassignmentPermission() {
       ProcessMaker.apiClient
@@ -451,27 +425,6 @@ export default {
           this.user = response.data;
         });
     },
-    getUsers(filter) {
-      ProcessMaker.apiClient.get(this.getUrlUsersTaskCount(filter)).then(response => {
-        this.users = [];
-        for (let i in response.data.data) {
-          this.users.push({
-            text: response.data.data[i].fullname,
-            value: response.data.data[i].id,
-            count: response.data.data[i].count
-          });
-        }
-      });
-    },
-    getUrlUsersTaskCount(filter) {
-      let url = "users_task_count?filter=" + filter;
-      return url;
-    },
-    onInput(filter) {
-      this.getUsers(filter);
-    },
-    onSelectedOption(item) {
-    }
   }
 };
 </script>

resources/js/tasks/show.js

@@ -15,6 +15,7 @@ import autosaveMixins from "../modules/autosave/autosaveMixin";
 import draftFileUploadMixin from "../modules/autosave/draftFileUploadMixin";
 import Mustache from "mustache";
 import TaskSaveNotification from "./components/TaskSaveNotification.vue";
+import reassignMixin from "../common/reassignMixin";
 
 Vue.use(Vuex);
 Vue.use("task", Task);
@@ -32,6 +33,7 @@ Vue.component("PMDropdownSuggest", PMDropdownSuggest);
 
 Vue.mixin(autosaveMixins);
 Vue.mixin(draftFileUploadMixin);
+Vue.mixin(reassignMixin);
 
 window.debounce = debounce;
 window.Vuex = Vuex;

resources/views/tasks/edit.blade.php

@@ -339,8 +339,8 @@ class="d-inline-flex pull-left align-items-center"
             <div class="form-group">
               {!!Form::label('user', __('User'))!!}
               <p-m-dropdown-suggest v-model="selectedUser"
-                :options="users"
-                @pmds-input="onInput"
+                :options="reassignUsers"
+                @pmds-input="onReassignInput"
                 :placeholder="$t('Type here to search')">
                 <template v-slot:pre-text="{ option }">
                   <b-badge variant="secondary"
@@ -354,7 +354,7 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
               <button type="button" class="btn btn-outline-secondary" @click="cancelReassign">
                 {{__('Cancel')}}
               </button>
-              <button type="button" class="btn btn-secondary" @click="reassignUser" :disabled="disabled">
+              <button type="button" class="btn btn-secondary" @click="reassignUser(true)" :disabled="disabled">
                 {{__('Reassign')}}
               </button>
             </div>
@@ -427,7 +427,6 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
           task,
           draftTask,
           userHasAccessToTask,
-          selectedUser: null,
           hasErrors: false,
           redirectInProcess: false,
           formData: {},
@@ -451,9 +450,7 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
           showMenu: true,
           userConfiguration: @json($userConfiguration),
           urlConfiguration:'users/configuration',
-          users: [],
           showTabs: true,
-          allowReassignment: false,
         },
         watch: {
           task: {
@@ -542,17 +539,8 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
             const status = (this.task.advanceStatus || '').toUpperCase();
             return "card-header text-status " + header[status];
           },
-          currentTaskUserId() {
-            return this.task?.user_id ?? this.task?.user?.id;
-          }
         },
         methods: {
-          setAllowReassignment() {
-            window.ProcessMaker.apiClient.get('tasks/user-can-reassign?tasks=' + this.task.id)
-              .then((response) => {
-                this.allowReassignment = response.data[this.task.id];
-              });
-          },
           defineUserConfiguration() {
             this.userConfiguration = JSON.parse(this.userConfiguration.ui_configuration);
             this.showMenu = this.userConfiguration.tasks.isMenuCollapse;
@@ -641,7 +629,7 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
           show () {
             this.selectedUser = null;
             this.showReassignment = true;
-            this.getUsers("");
+            this.getReassignUsers();
           },
           showQuickFill () {
             this.redirect(`/tasks/${this.task.id}/edit/quickfill`);
@@ -650,19 +638,6 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
             this.selectedUser = null;
             this.showReassignment = false;
           },
-          reassignUser () {
-            if (this.selectedUser) {
-              ProcessMaker.apiClient
-                .put("tasks/" + this.task.id, {
-                  user_id: this.selectedUser
-                })
-                .then(response => {
-                  this.showReassignment = false;
-                  this.selectedUser = null;
-                  this.redirect('/tasks');
-                });
-            }
-          },
           redirect(to, forceRedirect = false) {
             if (this.redirectInProcess && !forceRedirect) {
               return;
@@ -875,29 +850,6 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
           caseTitleField(task) {
             this.caseTitle = task.process_request.case_title;
           },
-          getUsers(filter) {
-            const params = { filter };
-            if (this.task?.id) {
-              params.assignable_for_task_id = this.task.id;
-            }
-
-            ProcessMaker.apiClient.get('users_task_count', { params }).then(response => {
-              this.users = [];
-              response.data.data.forEach((user) => {
-                if (this.currentTaskUserId === user.id) {
-                  return;
-                }
-                this.users.push({
-                  text: user.fullname,
-                  value: user.id,
-                  active_tasks_count: user.active_tasks_count
-                });
-              });
-            });
-          },
-          onInput: _.debounce(function (filter) {
-            this.getUsers(filter);
-          }, 300),
           getCommentsData: async () => {
             const response = await ProcessMaker.apiClient.get("comments-by-case", {
               params: {