From 68fd24dfebcfbd61c76c8de6e0cc1e7ff6bb3d66 Mon Sep 17 00:00:00 2001
From: fabio <fabio.guachalla@processmaker.com>
Date: Tue, 10 Aug 2021 17:00:39 -0400
Subject: [PATCH] PMCORE-3103:Add function in the ellipsis

---
 .../admin/settings/customCaseList/Tables.vue  | 73 +++++++++++++++----
 .../assets/js/components/utils/ellipsis.vue   |  2 +-
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index 233514558..d5787e36e 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -10,8 +10,8 @@
         ref="table" 
     >
         <div slot="actions" slot-scope="props">
-            <div>
-                <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+            <div @click="updateDataEllipsis(props.row)">
+                <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
         </div>
         <div slot="owner" slot-scope="props">
@@ -41,19 +41,9 @@ export default {
     data() {
         return {
             dataEllipsis: {
-                buttons: {
-                    open: {
-                    name: "edit",
-                    icon: "far fa-edit",
-                    fn: function() {console.log("Edit");}
-                    },
-                    note: {
-                    name: "case note",
-                    icon: "far fa-comments",
-                    fn: function() {console.log("comments");}
-                    },
-                }
-        },
+                buttons: {}
+            },
+            showEllipsis: false,
             newList: {
                 title: this.$i18n.t("New List"),
                 class: "btn-success",
@@ -191,7 +181,60 @@ export default {
         showModalDelete(data) {
             this.$refs["modal-delete-list"].data = data;
             this.$refs["modal-delete-list"].show();
+        },
+        showPreview(data) {
+
+        },
+        editCustomCaseList(data) {
+
+        },
+        downloadCaseList(data) {
+
+        },
+        /**
+     * Show options in the ellipsis 
+     * @param {objec} data
+     */
+    updateDataEllipsis(data) {
+        let that = this;
+        this.showEllipsis = !this.showEllipsis;
+        if (this.showEllipsis) {
+          this.dataEllipsis = {
+            buttons: {
+              open: {
+                name: "delete",
+                icon: "far fa-trash-alt",
+                color: "red",
+                fn: function() {
+                  that.showModalDelete(data);
+                }
+              },
+              note: {
+                name: "edit",
+                icon: "far fa-edit",
+                fn: function() {
+                  that.editCustomCaseList(data);
+                }
+              },
+              reassign: {
+                name: "download",
+                icon: "fas fa-arrow-circle-down",
+                fn: function() {
+                  that.downloadCaseList(data);
+                }
+              },
+              pause: {
+                name: "preview",
+                icon: "fas fa-tv",
+                color: "green",
+                fn: function() {
+                  that.showPreview(data);
+                }
+              }
+            }
+          }
         }
+      },
     }
 };
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/components/utils/ellipsis.vue b/resources/assets/js/components/utils/ellipsis.vue
index f6f251ca1..2af551553 100644
--- a/resources/assets/js/components/utils/ellipsis.vue
+++ b/resources/assets/js/components/utils/ellipsis.vue
@@ -13,7 +13,7 @@
                         variant="outline-info"
                         @click="executeFunction(item.fn)"
                     >
-                        <i :class="item.icon"></i>
+                        <i class="custom-icon" :class="item.icon" v-bind:style="{color: item.color}"></i>
                     </b-button>
                 </div>
             </div>