PMCORE-3402:Task Action Options should be displayed when mouse is over ellipsis and closed when ellipsis lose focus

Custom case list

CR
This commit is contained in:
Fabio Guachalla
2021-10-08 12:54:24 -04:00
parent ec834d878b
commit 10883dcf7a
13 changed files with 37 additions and 50 deletions

View File

@@ -58,7 +58,6 @@ export default {
if (response.statusText === "OK" || response.status === 200) {
that.$refs["modal-delete-list"].hide();
that.$parent.$refs["table"].getData();
that.$parent.$refs['ellipsis-' + that.data.id].hideActionButtons();
}
});
}

View File

@@ -12,8 +12,8 @@
ref="table"
>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<ellipsis :ref="`ellipsis-${props.row.id}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</div>
<div slot="owner" slot-scope="props">

View File

@@ -6,6 +6,7 @@
class="v-inline"
v-show="showActions"
ref="ellipsis"
@mouseleave="hideActionButtons"
>
<div class="buttonGroup">
<b-button
@@ -23,16 +24,16 @@
<div
class="ellipsis-button align-middle"
v-show="!showActions"
@mouseover="showActionButtons"
>
<div @click="showActionButtons()">
<span>
<i class="fas fa-ellipsis-v"></i>
</div>
</span>
</div>
</div>
</template>
<script>
import eventBus from '../../home/EventBus/eventBus';
export default {
name: "Ellipsis",
props: {
@@ -43,12 +44,7 @@ export default {
showActions: false
}
},
mounted(){
let that = this;
eventBus.$on('ellipsis::hide', (data) => {
that.hideActionButtons();
});
},
mounted () {},
methods: {
/**
* Callback function from parent
@@ -63,10 +59,8 @@ export default {
*/
showActionButtons() {
var i,
showOld = this.showActions,
elelemts;
eventBus.$emit("ellipsis::hide",{});
this.showActions = !showOld;
this.showActions = true;
if (this.showActions) {
if (this.$parent.Row !== undefined) {
for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){

View File

@@ -69,9 +69,8 @@
{{ props.row.PRIORITY }}
</div>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis
:ref="`ellipsis-${props.row.APP_UID}`"
v-if="dataEllipsis"
:data="dataEllipsis"
>
@@ -100,9 +99,8 @@
</div>
</b-col>
<b-col sm="12">
<div @click="updateDataEllipsis(props.item)">
<div @mouseover="updateDataEllipsis(props.item)">
<ellipsis
:ref="`ellipsis-${props.item.APP_UID}`"
v-if="dataEllipsis"
:data="dataEllipsis">
</ellipsis>
@@ -158,8 +156,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>

View File

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

View File

@@ -295,7 +295,7 @@ export default {
} else {
this.page = "MyCases";
}
if (window.config._nodeId === "CASES_SENT" && this.defaultOption !== "") {
if (window.config._nodeId === "CASES_SENT" && this.defaultOption.indexOf('openApplicationUid') > 0) {
this.cleanDefaultOption();
this.showAlert(this.$i18n.t("ID_NO_PERMISSION_NO_PARTICIPATED_CASES"));
}

View File

@@ -67,8 +67,8 @@
</div>
<div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -85,8 +85,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>
@@ -166,8 +166,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>

View File

@@ -66,8 +66,8 @@
</div>
<div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -84,8 +84,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>
@@ -165,8 +165,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>

View File

@@ -61,8 +61,8 @@
</div>
<div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
<div slot="actions" slot-scope="props">
<div @click="updateDataEllipsis(props.row)">
<ellipsis :ref="`ellipsis-${props.row.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -79,8 +79,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>
@@ -160,8 +160,8 @@
</div>
</b-col>
<b-col sm="12">
<div class="ellipsis-container" @click="updateDataEllipsis(props.item)">
<ellipsis :ref="`ellipsis-${props.item.APP_UID}`" v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col>
</b-row>

View File

@@ -59,7 +59,6 @@ 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.APP_UID].hideActionButtons()
if (that.$parent.$refs["vueTable"] !== undefined) {
that.$parent.$refs["vueTable"].getData();
}

View File

@@ -166,7 +166,6 @@ export default {
.then((response) => {
if (response.statusText == "OK" || response.status === 200) {
that.$refs["modal-pause-case"].hide();
that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
if (that.$parent.$refs["vueTable"] !== undefined) {
that.$parent.$refs["vueTable"].getData();
}

View File

@@ -149,7 +149,6 @@ export default {
api.cases.reassingCase(this.data).then((response) => {
if (response.statusText == "OK" || response.status === 200) {
that.$refs["modal-reassign-case"].hide();
that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
if (that.$parent.$refs["vueTable"] !== undefined) {
that.$parent.$refs["vueTable"].getData();
}

View File

@@ -55,7 +55,6 @@ export default {
api.cases.unpause(this.data).then((response) => {
if (response.statusText == "OK" || response.status === 200) {
that.$refs["modal-unpause-case"].hide();
that.$parent.$refs['ellipsis-' + that.data.APP_UID].hideActionButtons()
if (that.$parent.$refs["vueTable"] !== undefined) {
that.$parent.$refs["vueTable"].getData();
}