PMCORE-2879: Cancel Case button does not work when it comes from a email link with new UI

resources/assets/js/home/CaseDetail.vue

@@ -92,6 +92,7 @@
         ></attached-documents-edit>
       </div>
     </div>
+    <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
   </div>
 </template>
 
@@ -106,6 +107,7 @@ import TabsCaseDetail from "../home/TabsCaseDetail.vue";
 import ButtonFleft from "../components/home/ButtonFleft.vue";
 import ModalCancelCase from "../home/modal/ModalCancelCase.vue";
 import ModalNewRequest from "./ModalNewRequest.vue";
+import ModalClaimCase from "./modal/ModalClaimCase.vue";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import utils from "./../utils/utils";
 import Api from "../api/index";
@@ -123,6 +125,7 @@ export default {
     ModalCancelCase,
     ButtonFleft,
     ModalNewRequest,
+    ModalClaimCase,
     TaskCell,
   },
   props: {},
@@ -503,7 +506,15 @@ export default {
     countDownChanged(dismissCountDown) {
       this.dataAlert.dismissCountDown = dismissCountDown;
     },
+    /**
+     * Click handler
+     *
+     * @param {object} data
+     */
     onClick(data) {
+      if (data.row.ASSIGNEE === "Unassigned") {
+          this.claimCase(data.row);
+      } else {
           this.$emit("onUpdateDataCase", {
               APP_UID: data.row.APP_UID,
               DEL_INDEX: data.row.DEL_INDEX,
@@ -512,6 +523,21 @@ export default {
               ACTION: this.dataCase.ACTION || "todo"
           });
           this.$emit("onUpdatePage", "XCase");
+      }
+    },
+    /**
+     * Claim case
+     *
+     * @param {object} item
+     */
+    claimCase(item) {
+      let that = this;
+      Api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
+        Api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
+          that.$refs["modal-claim-case"].data = item;
+          that.$refs["modal-claim-case"].show();
+        });
+      });
     },
     /**
      * Verify if the case has the permission Summary Form