From 493908766c517baef557cb77094ad36b82d8721b Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Fri, 30 Jul 2021 19:10:33 -0400
Subject: [PATCH] PMCORE-3183:Review Task Action in all modes of view

---
 resources/assets/js/api/Services.js           |  5 ++-
 .../dataViews/vueCardView/VueCardView.vue     | 21 ++++++----
 .../dataViews/vueListView/VueListView.vue     | 22 +++++++----
 .../assets/js/components/utils/ellipsis.vue   |  1 +
 resources/assets/js/home/Draft/Draft.vue      | 38 +++++++++++++-----
 resources/assets/js/home/Inbox/Todo.vue       | 39 ++++++++++++++-----
 resources/assets/js/home/Paused/Paused.vue    | 34 ++++++++++++----
 .../assets/js/home/Unassigned/Unassigned.vue  | 34 ++++++++++++----
 8 files changed, 144 insertions(+), 50 deletions(-)

diff --git a/resources/assets/js/api/Services.js b/resources/assets/js/api/Services.js
index 95bcdcedb..84a18529b 100644
--- a/resources/assets/js/api/Services.js
+++ b/resources/assets/js/api/Services.js
@@ -67,5 +67,8 @@
     USERS: "/home/users",
     TASKS: "/home/tasks",
     CATEGORIES: "/home/categories",
-    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
+    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
+    PAUSE_CASE: "/cases/{app_uid}/pause",
+    REASSIGN_CASE: "/cases/{app_uid}/reassign-case",
+    REASSIGN_USERS: "/light/userstoreassign/{task_uid}"
 };
\ No newline at end of file
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
index 34d9d176c..ef5bf1860 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
@@ -6,13 +6,20 @@
         :style="{height: height + 'px'}"
       >
         <vue-card v-for="item in data" :key="item.id" :item="item" :options="options">
-          <slot
-            v-for="column in options.columns"
-            :name="column"
-            :item="item"
-            :column="column"
-            :headings="options.headings"
-          ></slot>
+          <b-row>
+            <b-col sm="9">
+              <slot
+                v-for="column in options.columns"
+                :name="column"
+                :item="item"
+                :column="column"
+                :headings="options.headings"
+              ></slot>
+            </b-col>
+            <b-col sm="3">
+              <slot name="actions"></slot>
+            </b-col>
+          </b-row>
         </vue-card>
       </div>
 
diff --git a/resources/assets/js/components/dataViews/vueListView/VueListView.vue b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
index 130fb40e8..be32ad834 100644
--- a/resources/assets/js/components/dataViews/vueListView/VueListView.vue
+++ b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
@@ -6,13 +6,21 @@
         :style="{height: height + 'px'}"
       >
         <vue-list v-for="item in data" :key="item.id" :item="item" :options="options"> 
-          <slot
-            v-for="column in options.columns"
-            :name="column"
-            :item="item"
-            :column="column"
-            :headings="options.headings"
-          ></slot>
+          <b-row>
+            <b-col sm="10">
+              <slot
+                v-for="column in options.columns"
+                :name="column"
+                :item="item"
+                :column="column"
+                :headings="options.headings"
+                ref="containerList"
+              ></slot>
+            </b-col>
+            <b-col sm="2">
+              <slot name="actions"></slot>
+            </b-col>
+          </b-row>
         </vue-list>
       </div>
 
diff --git a/resources/assets/js/components/utils/ellipsis.vue b/resources/assets/js/components/utils/ellipsis.vue
index e790fb6fe..f6f251ca1 100644
--- a/resources/assets/js/components/utils/ellipsis.vue
+++ b/resources/assets/js/components/utils/ellipsis.vue
@@ -94,6 +94,7 @@ export default {
         width: 0px;
         z-index: 999;
         display: inline-flex !important;
+        opacity: 1 !important;
     }
     .btn-outline-info {
         border: none;
diff --git a/resources/assets/js/home/Draft/Draft.vue b/resources/assets/js/home/Draft/Draft.vue
index 547def922..e9d167a85 100644
--- a/resources/assets/js/home/Draft/Draft.vue
+++ b/resources/assets/js/home/Draft/Draft.vue
@@ -48,10 +48,19 @@
       :options="optionsVueView"
       ref="vueCardView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
@@ -105,10 +114,19 @@
       :options="optionsVueView"
       ref="vueListView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
@@ -523,5 +541,7 @@ export default {
   padding-left: 50px;
   padding-right: 50px;
 }
-
+.ellipsis-container {
+  margin-top: 5em;
+}
 </style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index 5ff1debd1..fa6b06b26 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -60,10 +60,19 @@
       :options="optionsVueView"
       ref="vueCardView"
     >
-      <div slot="detail" slot-scope="props">
-        <div @click="updateDataEllipsis(props.row)">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
@@ -117,12 +126,21 @@
       :options="optionsVueView"
       ref="vueListView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
-      <div slot="case_number" slot-scope="props" class="v-card-text">
+      <div ref="text" slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
           >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
         >
@@ -607,7 +625,8 @@ export default {
   display: inline-block;
 }
 
-.v-card-text {
+.ellipsis-container {
+  margin-top: 5em;
 }
 
 .v-pm-card-info{
diff --git a/resources/assets/js/home/Paused/Paused.vue b/resources/assets/js/home/Paused/Paused.vue
index 8b284a800..9dd4dbfc3 100644
--- a/resources/assets/js/home/Paused/Paused.vue
+++ b/resources/assets/js/home/Paused/Paused.vue
@@ -59,10 +59,19 @@
       :options="optionsVueView"
       ref="vueCardView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
@@ -116,10 +125,19 @@
       :options="optionsVueView"
       ref="vueListView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
diff --git a/resources/assets/js/home/Unassigned/Unassigned.vue b/resources/assets/js/home/Unassigned/Unassigned.vue
index 32a6692f4..557ce8f95 100644
--- a/resources/assets/js/home/Unassigned/Unassigned.vue
+++ b/resources/assets/js/home/Unassigned/Unassigned.vue
@@ -54,10 +54,19 @@
       :options="optionsVueList"
       ref="vueCardView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"
@@ -110,10 +119,19 @@
       :options="optionsVueList"
       ref="vueListView"
     >
-      <div slot="detail" slot-scope="props">
-        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
-          <i class="fas fa-info-circle"></i>
-        </div>
+      <div slot="actions" slot-scope="props">
+        <b-row>
+          <b-col sm="12">
+            <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+              <i class="fas fa-info-circle"></i>
+            </div>
+          </b-col>
+          <b-col sm="12">
+            <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
+              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            </div>
+          </b-col>
+        </b-row>
       </div>
       <div slot="case_number" slot-scope="props" class="v-card-text">
         <span class="v-card-text-highlight"