PMCORE-3261:Ellipsis does not hidden after execute an action

resources/assets/js/components/utils/ellipsis.vue

@@ -50,11 +50,23 @@ export default {
          * Show the action buttons by row
          */
         showActionButtons() {
-            var i;
+            var i,
+                elelemts;
             this.showActions = !this.showActions;
             if (this.showActions) {
-                for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
+                if (this.$parent.Row !== undefined) {
-                    this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
+                    for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
+                        this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
+                    }
+                } else if (this.$parent.item !== undefined) {
+                    if (this.$parent.$parent.$parent.$refs.vueListView !== undefined) {
+                        elelemts = this.$parent.$el.getElementsByClassName('col-sm-5');
+                        elelemts[0].style.opacity = 0.4;
+                        elelemts[1].style.opacity = 0.4;
+                    }
+                    if (this.$parent.$parent.$parent.$refs.vueCardView !== undefined) {
+                        this.$parent.$el.getElementsByClassName('col-sm-9')[0].style.opacity = 0.2
+                    }
                 }
             } else {
                 this.hideActionButtons();     
@@ -64,11 +76,23 @@ export default {
          * Hide action buttons
          */
         hideActionButtons() {
-            var i;
+            var i,
+                elelemts;
             this.showActions = false;
-            for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
+            if (this.$parent.Row !== undefined) {
+                for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
                     this.$parent.$parent.$parent.$children[i].$el.style.opacity = 1
                 }
+            } else if (this.$parent.item !== undefined) {
+                if (this.$parent.$parent.$parent.$refs.vueListView !== undefined) {
+                    elelemts = this.$parent.$el.getElementsByClassName('col-sm-5');
+                    elelemts[0].style.opacity = 1;
+                    elelemts[1].style.opacity = 1;
+                }
+                if (this.$parent.$parent.$parent.$refs.vueCardView !== undefined) {
+                    this.$parent.$el.getElementsByClassName('col-sm-9')[0].style.opacity = 1;
+                }
+            }
         },
     }
 }

resources/assets/js/home/Draft/Draft.vue

@@ -44,7 +44,7 @@
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
         <div @click="updateDataEllipsis(props.row)">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis :ref="`ellipsis-${props.row.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -62,7 +62,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.row)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -128,7 +128,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>

resources/assets/js/home/Inbox/Inbox.vue

@@ -59,7 +59,7 @@
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
         <div @click="updateDataEllipsis(props.row)">
-          <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis :ref="`ellipsis-${props.row.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -77,7 +77,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -150,7 +150,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>

resources/assets/js/home/Paused/Paused.vue

@@ -58,7 +58,7 @@
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
         <div @click="updateDataEllipsis(props.row)">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis :ref="`ellipsis-${props.row.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -76,7 +76,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -149,7 +149,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>

resources/assets/js/home/Unassigned/Unassigned.vue

@@ -53,7 +53,7 @@
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
         <div @click="updateDataEllipsis(props.row)">
-          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+          <ellipsis :ref="`ellipsis-${props.row.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
         </div>
       </div>
     </v-server-table>
@@ -71,7 +71,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>
@@ -144,7 +144,7 @@
           </b-col>
           <b-col sm="12">
             <div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
-              <ellipsis ref="ellipsis" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+              <ellipsis :ref="`ellipsis-${props.item.TAS_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
             </div>
           </b-col>
         </b-row>

resources/assets/js/home/modal/ModalClaimCase.vue

@@ -59,6 +59,16 @@ export default {
       api.cases.claim(this.data).then((response) => {
         if (response.status === 200) {
           that.$refs["modal-claim-case"].hide();
+          that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()
+          if (that.$parent.$refs["vueTable"] !== undefined) {
+            that.$parent.$refs["vueTable"].getData();
+          }
+          if (that.$parent.$refs["vueListView"] !== undefined) {
+            that.$parent.$refs["vueListView"].getData();
+          }
+          if (that.$parent.$refs["vueCardView"] !== undefined) {
+            that.$parent.$refs["vueCardView"].getData();
+          }
           //TODO Trigger onUpdateDataCase
           eventBus.$emit("home-update-datacase", {
             APP_UID: this.data.APP_UID,

resources/assets/js/home/modal/ModalPauseCase.vue

@@ -147,11 +147,19 @@ export default {
       this.data.unpausedTime = this.pauseData.unpauseTime;
       this.data.nofitfyUser = this.pauseData.nofitfyUser;
       this.data.reasonPause = this.pauseData.reasonPause;
-      
       api.cases.pauseCase(this.data).then((response) => {
         if (response.statusText == "OK") {
           that.$refs["modal-pause-case"].hide();
-          that.$parent.$refs["vueTable"].getData();
+          that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()
+          if (that.$parent.$refs["vueTable"] !== undefined) {
+            that.$parent.$refs["vueTable"].getData();
+          }
+          if (that.$parent.$refs["vueListView"] !== undefined) {
+            that.$parent.$refs["vueListView"].getData();
+          }
+          if (that.$parent.$refs["vueCardView"] !== undefined) {
+            that.$parent.$refs["vueCardView"].getData();
+          }
         }
       });
     },

resources/assets/js/home/modal/ModalReassignCase.vue

@@ -122,7 +122,16 @@ export default {
       api.cases.reassingCase(this.data).then((response) => {
         if (response.statusText == "OK") {
           that.$refs["modal-reassign-case"].hide();
-          that.$parent.$refs["vueTable"].getData();
+          that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()
+          if (that.$parent.$refs["vueTable"] !== undefined) {
+            that.$parent.$refs["vueTable"].getData();
+          }
+          if (that.$parent.$refs["vueListView"] !== undefined) {
+            that.$parent.$refs["vueListView"].getData();
+          }
+          if (that.$parent.$refs["vueCardView"] !== undefined) {
+            that.$parent.$refs["vueCardView"].getData();
+          }
         }
       });
     },

resources/assets/js/home/modal/ModalUnpauseCase.vue

@@ -55,9 +55,16 @@ export default {
       api.cases.unpause(this.data).then((response) => {
         if (response.statusText == "OK") {
           that.$refs["modal-unpause-case"].hide();
-          if (that.$parent.$refs["vueTable"]) { // TODO this component should be return a event to parent to code in the parent
+          that.$parent.$refs['ellipsis-' + that.data.TAS_UID].hideActionButtons()
+          if (that.$parent.$refs["vueTable"] !== undefined) {
             that.$parent.$refs["vueTable"].getData();
           }
+          if (that.$parent.$refs["vueListView"] !== undefined) {
+            that.$parent.$refs["vueListView"].getData();
+          }
+          if (that.$parent.$refs["vueCardView"] !== undefined) {
+            that.$parent.$refs["vueCardView"].getData();
+          }
         }
       });
     },