UPDATE ROUTE in CASE DETAIL

resources/assets/js/components/home/caseDetail/CaseSummary.vue

@@ -53,7 +53,7 @@
       </div>
       <br />
       <h6 class="card-subtitle mb-2 text-muted">{{ data.titleActions }}</h6>
-      <div v-if=data.btnType class="container v-case-summary-center">
+      <div v-if="data.btnType" class="container v-case-summary-center">
         <button
           type="button"
           class="btn btn-success btn-sm"

resources/assets/js/components/home/caseDetail/IoDocuments.vue

@@ -59,6 +59,7 @@ export default {
       icon: {
         pdf: "fas fa-file-pdf",
         doc: "fas fa-file-word",
+        png: "fas fa-picture-o",
       },
     };
   },

resources/assets/js/components/home/caseDetail/Tabs.vue

@@ -12,29 +12,30 @@
 </template>
 
 <script>
-import { Tabs, Tab } from 'vue-slim-tabs'
+import { Tabs, Tab } from "vue-slim-tabs";
 
 export default {
   props: {
-    data: Object
+    data: Object,
   },
   components: {
-    Tabs, Tab
+    Tabs,
+    Tab,
   },
   data() {
     return {
-      0: function() {
+      0: function () {
         console.log(this.data.items[0].appUid);
-      }
+      },
     };
   },
   methods: {
     selectedTab(e, index) {
       if (index === 0) {
-        console.log("fabio")
+        console.log("fabio");
-      }
       }
     },
-}
+  },
+};
 </script>
 <style src="vue-slim-tabs/themes/default.css"></style>

resources/assets/js/home/CaseDetail.vue

@@ -1,7 +1,10 @@
 <template>
   <div id="case-detail" ref="case-detail" class="v-container-mycases">
     <div>
-            <p class="mb-2"><b-icon icon="arrow-left" @click="backSearch()"></b-icon><u>Back to Results</u></p>
+      <p class="mb-2">
+        <b-icon icon="arrow-left" @click="backSearch()"></b-icon
+        ><u>Back to Results</u>
+      </p>
     </div>
     <div class="row">
       <div class="col-sm-8">
@@ -11,7 +14,7 @@
             :columns="columns"
             :options="options"
             ref="vueTable"
-                        style="height:120px"
+            style="height: 120px"
           >
             <div slot="task" slot-scope="props">
               {{ props.row.TASK }}
@@ -41,11 +44,25 @@
         <div>
           <p><b>Comments</b></p>
           <div class="form-group">
-                        <textarea class="form-control" name="comments" id="comments" cols="80" rows="5"></textarea>
+            <textarea
+              class="form-control"
+              name="comments"
+              id="comments"
+              cols="80"
+              rows="5"
+            ></textarea>
             <div class="form-check">
-                            <input type="checkbox" class="form-check-input" id="sendEmail">
+              <input type="checkbox" class="form-check-input" id="sendEmail" />
-                            <label class="form-check-label" for="sendEmail">Send email to Participants</label>
+              <label class="form-check-label" for="sendEmail"
-                            <button class="btn btn-secondary btn-sm" id="comment" name="comment">Comment</button>
+                >Send email to Participants</label
+              >
+              <button
+                class="btn btn-secondary btn-sm"
+                id="comment"
+                name="comment"
+              >
+                Comment
+              </button>
             </div>
           </div>
         </div>
@@ -60,10 +77,10 @@
 </template>
 
 <script>
-import Tabs from '../components/Tabs.vue';
+import Tabs from "../components/home/caseDetail/Tabs.vue";
-import IoDocuments from '../components/cases/IoDocuments.vue';
+import IoDocuments from "../components/home/caseDetail/IoDocuments.vue";
-import CaseSummary from '../components/cases/CaseSummary.vue';
+import CaseSummary from "../components/home/caseDetail/CaseSummary.vue";
-import AttachedDocuments from '../components/cases/AttachedDocuments.vue';
+import AttachedDocuments from "../components/home/caseDetail/AttachedDocuments.vue";
 
 export default {
   name: "CaseDetail",
@@ -71,20 +88,28 @@ export default {
     Tabs,
     IoDocuments,
     CaseSummary,
-        AttachedDocuments
+    AttachedDocuments,
   },
   props: {},
-    data () {
+  data() {
     return {
-                columns: ["task", "case_title", "assignee", "status", "due_date", "actions"],
+      columns: [
-                tableData:[{
+        "task",
+        "case_title",
+        "assignee",
+        "status",
+        "due_date",
+        "actions",
+      ],
+      tableData: [
+        {
           task: "Approve Art",
           case_title: "Case Title A",
           assignee: "User 1",
           status: "To Do",
           due_date: "3 days",
-                    
+        },
-                }],
+      ],
       options: {
         headings: {
           task: this.$i18n.t("ID_TASK"),
@@ -92,18 +117,17 @@ export default {
           assignee: this.$i18n.t("ID_ASSIGNEE"),
           status: this.$i18n.t("ID_STATUS"),
           due_date: this.$i18n.t("ID_DUE_DATE"),
-                        actions: this.$i18n.t("ID_ACTIONS")
+          actions: this.$i18n.t("ID_ACTIONS"),
         },
         selectable: {
-                        mode: 'single', // or 'multiple'
+          mode: "single", // or 'multiple'
           only: function (row) {
-                            return true // any condition
+            return true; // any condition
           },
-                        selectAllMode: 'all',// or 'page',
+          selectAllMode: "all", // or 'page',
           programmatic: false,
         },
-                    filterable: false
+        filterable: false,
-                    
       },
       dataCaseSummary: {
         title: "Case Summary",
@@ -140,8 +164,8 @@ export default {
             extension: "pdf",
             onClick: () => {
               console.log("Attached document");
-                      }
+            },
-                    }
+          },
         ],
         titleOutput: "Output Document",
         outputDocuments: [
@@ -150,8 +174,8 @@ export default {
             extension: "pdf",
             onClick: () => {
               console.log("Attached document");
-                      }
+            },
-                    }
+          },
         ],
       },
       dataAttachedDocuments: {
@@ -163,7 +187,7 @@ export default {
             onClick: () => {
               console.log("Attached document");
             },
-                    }
+          },
         ],
       },
       dataTabs: {
@@ -174,41 +198,43 @@ export default {
               firstName: "Jason",
               lastName: "Burne",
               userName: "jburne@processmaker.com",
-                      }
+            },
           },
           {
             title: "Process Map",
             data: [
               {
-                          pro_uid: "123dit"
+                pro_uid: "123dit",
-                        }
+              },
-                      ]
+            ],
           },
           {
-                      title: "Case History"
+            title: "Case History",
           },
           {
-                      title: "Change Log"
+            title: "Change Log",
-                    }
+          },
-                  ]
+        ],
-                }
+      },
     };
   },
 
   mounted() {
     let that = this;
-        this.$el.getElementsByClassName('VuePagination__count')[0].remove();
+    this.$el.getElementsByClassName("VuePagination__count")[0].remove();
     this.getDataCaseSummary();
     this.getDataIODocuments();
   },
   methods: {
     getDataCaseSummary() {
       var data = new FormData();
-            data.append('appUid', APP_UID);
+      data.append("appUid", APP_UID);
-            data.append('delIndex', DEL_INDEX);
+      data.append("delIndex", DEL_INDEX);
-            data.append('action', 'todo');
+      data.append("action", "todo");
 
-            ProcessMaker.apiClient.post('../../../appProxy/getSummary', data).then((response) => {
+      ProcessMaker.apiClient
+        .post("../../../appProxy/getSummary", data)
+        .then((response) => {
           var data = response.data;
           this.dataCaseSummary = {
             title: "Case Summary",
@@ -236,8 +262,9 @@ export default {
               delegationDate: response.data[11].value.split(" ")[0],
               duration: response.data[11].value.split(" ")[1],
             },
-                }  
+          };
-            }).catch((err) => {
+        })
+        .catch((err) => {
           throw new Error(err);
         });
     },
@@ -247,9 +274,14 @@ export default {
     },
     getInputDocuments() {
       var data = new FormData();
-            data.append ('appUid', APP_UID);
+      data.append("appUid", APP_UID);
-            data.append ('delIndex', DEL_INDEX);
+      data.append("delIndex", DEL_INDEX);
-            ProcessMaker.apiClient.post('../../../cases/cases_Ajax.php?action=getCasesInputDocuments',data).then((response) => {
+      ProcessMaker.apiClient
+        .post(
+          "../../../cases/cases_Ajax.php?action=getCasesInputDocuments",
+          data
+        )
+        .then((response) => {
           var data = response.data,
             document = data.data,
             i,
@@ -259,22 +291,28 @@ export default {
             this.dataIoDocuments.inputDocuments = [];
             for (i = 0; i < data.totalCount; i += 1) {
               info = {
-                            "title" : document[i].TITLE,
+                title: document[i].TITLE,
-                            "extension" : document[i].TITLE.split(".")[1],
+                extension: document[i].TITLE.split(".")[1],
-                            "onClick" : document[i].DOWNLOAD_LINK
+                onClick: document[i].DOWNLOAD_LINK,
               };
               this.dataIoDocuments.inputDocuments.push(info);
             }
           }
-            }).catch((err) => {
+        })
+        .catch((err) => {
           throw new Error(err);
         });
     },
     getOutputDocuments() {
       var data = new FormData();
-            data.append ('appUid', APP_UID);
+      data.append("appUid", APP_UID);
-            data.append ('delIndex', DEL_INDEX);
+      data.append("delIndex", DEL_INDEX);
-            ProcessMaker.apiClient.post('../../../cases/cases_Ajax.php?action=getCasesOutputDocuments',data).then((response) => {
+      ProcessMaker.apiClient
+        .post(
+          "../../../cases/cases_Ajax.php?action=getCasesOutputDocuments",
+          data
+        )
+        .then((response) => {
           var data = response.data,
             document = data.data,
             i,
@@ -284,17 +322,18 @@ export default {
             this.dataIoDocuments.outputDocuments = [];
             for (i = 0; i < data.totalCount; i += 1) {
               info = {
-                            "title" : document[i].TITLE,
+                title: document[i].TITLE,
-                            "extension" : document[i].TITLE.split(".")[1],
+                extension: document[i].TITLE.split(".")[1],
-                            "onClick" : document[i].DOWNLOAD_LINK
+                onClick: document[i].DOWNLOAD_LINK,
               };
               this.dataIoDocuments.outputDocuments.push(info);
             }
           }
-            }).catch((err) => {
+        })
+        .catch((err) => {
           throw new Error(err);
         });
     },
-    }
+  },
-}
+};
 </script>

resources/assets/js/home/Home.vue

@@ -28,9 +28,10 @@ import Draft from "./Draft";
 import Paused from "./Paused";
 import Unassigned from "./Unassigned";
 import BatchRouting from "./BatchRouting";
+import CaseDetail from "./CaseDetail";
 import XCase from "./XCase";
 import TaskReassignments from "./TaskReassignments";
-import AdvancedSearch from "./AdvancedSearch"
+import AdvancedSearch from "./AdvancedSearch";
 
 export default {
   name: "Home",
@@ -46,6 +47,7 @@ export default {
     Draft,
     Paused,
     Unassigned,
+    CaseDetail,
   },
   data() {
     return {

resources/assets/js/home/Todo.vue

@@ -9,6 +9,11 @@
       :options="options"
       ref="vueTable"
     >
+      <div slot="detail" slot-scope="props">
+        <div class="btn-default" @click="openCaseDetail(props)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
       <div slot="case_number" slot-scope="props">
         {{ props.row.CASE_NUMBER }}
       </div>
@@ -74,6 +79,7 @@ export default {
         },
       },
       columns: [
+        "detail",
         "case_number",
         "case_title",
         "process_name",
@@ -216,6 +222,19 @@ export default {
       };
       this.$parent.page = "XCase";
     },
+    /**
+     * Open case detail
+     *
+     * @param {object} item
+     */
+    openCaseDetail(item) {
+      this.$parent.dataCase = {
+        APP_UID: item.APP_UID,
+        DEL_INDEX: item.DEL_INDEX,
+        ACTION: "todo",
+      };
+      this.$parent.page = "case-detail";
+    },
   },
 };
 </script>