Merged in feature/PMCORE-3077 (pull request #7969)

PMCORE-3077

Approved-by: Rodrigo Quelca

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

@@ -0,0 +1,183 @@
+<template>
+    <div class="float-right">
+         <transition name="fade">
+            <div
+                class="v-inline"
+                v-show="showActions"
+            >
+                <div class="buttonGroup" @focus="hidebuttonsAction()">
+                    <b-button
+                        v-if="data.showClaim"
+                        variant="outline-info"
+                        @click="claimCase"
+                    >
+                        <i class="fas fa-briefcase"></i>
+                    </b-button>
+                    <b-button
+                        v-if="data.showOpen"
+                        variant="outline-info"
+                        @click="openCase"
+                    >
+                        <i class="far fa-edit"></i>
+                    </b-button>
+                    <b-button
+                        v-show="data.showPlay"
+                        variant="outline-info"
+                        @click="unPauseCase"
+                    >
+                        <i class="far fa-play-circle"></i>
+                    </b-button>
+                    <b-button
+                        v-show="data.showPause"
+                        variant="outline-info"
+                        @click="pauseCase"
+                    >
+                        <i class="far fa-pause-circle"></i>
+                    </b-button>
+                    <b-button
+                        v-show="data.showReassign"
+                        variant="outline-info"
+                        @click="reassingCase"
+                    >
+                        <i class="fas fa-redo"></i>
+                    </b-button>
+                    <b-button
+                        v-show="data.showNote"
+                        variant="outline-info"
+                        @click="openCaseNote"
+                    >
+                        <i class="far fa-comments"></i>
+                    </b-button>
+                </div>
+            </div>
+        </transition>
+        <div class="ellipsis-button">
+            <div @click="showActionButtons()">
+                <i class="fas fa-ellipsis-v"></i>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Ellipsis",
+    props: {
+        data: Object
+    },
+    data () {
+        return {
+            showActions: false
+        }
+    },
+    methods: {
+        /**
+         * Show the action buttons by row
+         */
+        showActionButtons() {
+            var i;
+            this.showActions = !this.showActions;
+            if (this.showActions) {
+                for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
+                    this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
+                }
+            } else {
+                this.hideActionButtons();     
+            }
+        },
+        /**
+         * Hide action buttons
+         */
+        hideActionButtons() {
+            var i;
+            this.showActions = false;
+            for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
+                    this.$parent.$parent.$parent.$children[i].$el.style.opacity = 1
+                }
+        },
+        /**
+         * Call the event to reassign a case
+         */
+        reassingCase() {
+            this.hideActionButtons();
+            console.log("Action Reassing Case");
+            console.log(this.data);
+        },
+        /**
+         * Call the event to open a case
+         */
+        openCase() {
+            this.hideActionButtons();
+            console.log("Action Open Case");
+            console.log(this.data);
+        },
+        /**
+         * Call the event to unpause a case
+         */
+        unPauseCase() {
+            this.hideActionButtons();
+            console.log("Action Unpause Case");
+            console.log(this.data);
+        },
+        /**
+         * Call the event to pause a case
+         */
+        pauseCase() {
+            this.hideActionButtons();
+            console.log("Action Pause Case");
+            console.log(this.data);
+        },
+        /**
+         * Call the event to open case note
+         */
+        openCaseNote() {
+            this.hideActionButtons();
+            console.log("Action Case Note");
+            console.log(this.data);
+        },
+        /**
+         * Call the event to claim a case
+         */
+        claimCase() {
+            this.hideActionButtons();
+            console.log("Action Claim Case");
+            console.log(this.data);
+        }
+    }
+}
+</script>
+
+<style>
+    .v-btn-request {
+        display: inline-block;
+    }
+    .v-inline {
+        display: inline-block;
+    }
+    .ellipsis-button {
+        font-size: 22px;
+        width: 15px;
+        text-align: center;
+        float: inherit;
+        margin-top: 9px;
+    }
+    .buttonGroup {
+        position: relative;
+        flex-direction: row-reverse;
+        width: 0px;
+        z-index: 999999;
+        display: inline-flex !important;
+    }
+    .btn-outline-info {
+        border: none;
+        font-size: 25px;
+    }
+    .fade-enter-active, .fade-leave-active {
+        transition: opacity 0.5s;
+        position: relative;
+    }
+    .fade-enter, .fade-leave-to {
+        opacity: 0;
+        position: relative;
+    }
+</style>

resources/assets/js/home/Draft.vue

@@ -34,9 +34,9 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button class="btn btn-success btn-sm" @click="openCase(props.row)">
-          {{ $t("ID_OPEN_CASE") }}
-        </button>
+        <div @click="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        </div>
       </div>
     </v-server-table>
   </div>
@@ -50,6 +50,7 @@ import CasesFilter from "../components/search/CasesFilter";
 import TaskCell from "../components/vuetable/TaskCell.vue";
 import api from "./../api/index";
 import utils from "./../utils/utils";
+import Ellipsis from '../components/utils/ellipsis.vue';
 
 export default {
   name: "Draft",
@@ -59,6 +60,7 @@ export default {
     ModalNewRequest,
     TaskCell,
     CasesFilter,
+    Ellipsis,
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -120,7 +122,8 @@ export default {
           "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      }
+      },
+      dataEllipsis: null,
     };
   },
   created() {
@@ -128,6 +131,7 @@ export default {
   },
   mounted() {
     this.openDefaultCase();
+    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -323,6 +327,34 @@ export default {
      */
     updateView(){
       this.$refs["vueTable"].getData();
+    },
+    /**
+     * set data by default in the ellipsis component 
+     */
+    setDataEllipsis() {
+      this.dataEllipsis = {
+        showNote: false,
+        showReassign: false,
+        showPause: false,
+        showPlay: false,
+        showOpen: false,
+        showClaim: false
+      }
+    },
+    /**
+     * 
+     */
+    updateDataEllipsis(data) {
+      this.dataEllipsis = {
+        APP_UID: data.APP_UID || "",
+        PRO_UID: data.PRO_UID || "",
+        showOpen: true,
+        showNote: true,
+        showPlay: false,
+        showReassign: false,
+        showPause: false,
+        showClaim: false
+      };
     }
   },
 };

resources/assets/js/home/Paused.vue

@@ -44,12 +44,9 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button
-          class="btn btn-success btn-sm"
-          @click="showModalUnpauseCase(props.row)"
-        >
-          {{ $t("ID_UNPAUSE") }}
-        </button>
+        <div @click="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        </div>
       </div>
     </v-server-table>
     <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
@@ -65,6 +62,7 @@ import TaskCell from "../components/vuetable/TaskCell.vue";
 import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue";
 import api from "./../api/index";
 import utils from "./../utils/utils";
+import Ellipsis from '../components/utils/ellipsis.vue';
 
 export default {
   name: "Paused",
@@ -75,6 +73,7 @@ export default {
     TaskCell,
     ModalUnpauseCase,
     CasesFilter,
+    Ellipsis,
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -142,7 +141,8 @@ export default {
           "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      }
+      },
+      dataEllipsis: null,
     };
   },
   created() {
@@ -151,6 +151,7 @@ export default {
   mounted() {
     // force to open case
     this.openDefaultCase();
+    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -357,6 +358,34 @@ export default {
      */
     updateView(){
       this.$refs["vueTable"].getData();
+    },
+    /**
+     * set data by default in the ellipsis component 
+     */
+    setDataEllipsis() {
+      this.dataEllipsis = {
+        showNote: false,
+        showReassign: false,
+        showPause: false,
+        showPlay: false,
+        showOpen: false,
+        showClaim: false
+      }
+    },
+    /**
+     * 
+     */
+    updateDataEllipsis(data) {
+      this.dataEllipsis = {
+        APP_UID: data.APP_UID || "",
+        PRO_UID: data.PRO_UID || "",
+        showOpen: false,
+        showNote: true,
+        showPlay: true,
+        showReassign: true,
+        showPause: false,
+        showClaim: false
+      };
     }
   },
 };

resources/assets/js/home/Todo.vue

@@ -44,9 +44,9 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button class="btn btn-success btn-sm" @click="openCase(props.row)">
-          {{ $t("ID_OPEN_CASE") }}
-        </button>
+        <div @click="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        </div>
       </div>
     </v-server-table>
   </div>
@@ -60,6 +60,7 @@ import TaskCell from "../components/vuetable/TaskCell.vue";
 import CasesFilter from "../components/search/CasesFilter";
 import api from "./../api/index";
 import utils from "./../utils/utils";
+import Ellipsis from '../components/utils/ellipsis.vue';
 
 export default {
   name: "Todo",
@@ -69,6 +70,7 @@ export default {
     ModalNewRequest,
     TaskCell,
     CasesFilter,
+    Ellipsis,
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -136,7 +138,8 @@ export default {
           "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      }
+      },
+      dataEllipsis: null
     };
   },
   created() {
@@ -145,6 +148,7 @@ export default {
   mounted() {
     // force to open case
     this.openDefaultCase();
+    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -348,6 +352,34 @@ export default {
      */
     updateView(){
       this.$refs["vueTable"].getData();
+    },
+    /**
+     * set data by default in the ellipsis component 
+     */
+    setDataEllipsis() {
+      this.dataEllipsis = {
+        showNote: false,
+        showReassign: false,
+        showPause: false,
+        showPlay: false,
+        showOpen: false,
+        showClaim: false
+      }
+    },
+    /**
+     * 
+     */
+    updateDataEllipsis(data) {
+      this.dataEllipsis = {
+        APP_UID: data.APP_UID || "",
+        PRO_UID: data.PRO_UID || "",
+        showOpen: true,
+        showNote: true,
+        showPlay: false,
+        showReassign: true,
+        showPause: true,
+        showClaim: false
+      };
     }
   },
 };

resources/assets/js/home/Unassigned.vue

@@ -41,9 +41,9 @@
       </div>
       <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
       <div slot="actions" slot-scope="props">
-        <button class="btn btn-success btn-sm" @click="claimCase(props.row)">
-          {{ $t("ID_CLAIM") }}
-        </button>
+        <div @click="updateDataEllipsis(props.row)">
+          <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
+        </div>
       </div>
     </v-server-table>
     <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
@@ -59,6 +59,7 @@ import CasesFilter from "../components/search/CasesFilter";
 import ModalClaimCase from "./modal/ModalClaimCase.vue";
 import api from "./../api/index";
 import utils from "./../utils/utils";
+import Ellipsis from '../components/utils/ellipsis.vue';
 
 export default {
   name: "Unassigned",
@@ -69,6 +70,7 @@ export default {
     TaskCell,
     ModalClaimCase,
     CasesFilter,
+    Ellipsis,
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -137,11 +139,13 @@ export default {
           "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
           "PAUSED": this.$i18n.t("ID_PAUSED"),
           "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      }
+      },
+      dataEllipsis: null,
     };
   },
   mounted() {
     this.initFilters();
+    this.setDataEllipsis();
   },
   watch: {},
   computed: {
@@ -328,6 +332,34 @@ export default {
      */
     updateView(){
       this.$refs["vueTable"].getData();
+    },
+    /**
+     * set data by default in the ellipsis component 
+     */
+    setDataEllipsis() {
+      this.dataEllipsis = {
+        showNote: false,
+        showReassign: false,
+        showPause: false,
+        showPlay: false,
+        showOpen: false,
+        showClaim: false
+      }
+    },
+    /**
+     * 
+     */
+    updateDataEllipsis(data) {
+      this.dataEllipsis = {
+        APP_UID: data.APP_UID || "",
+        PRO_UID: data.PRO_UID || "",
+        showOpen: false,
+        showNote: true,
+        showPlay: false,
+        showReassign: false,
+        showPause: true,
+        showClaim: true
+      };
     }
   },
 };