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:
@@ -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();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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++){
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"));
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user