fernando/luos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PMCORE-3956:Tasks > Many options are displaying in the Cases List when columns are hiding or showing

Browse Source 
CR
This commit is contained in:
Fabio Guachalla
2022-09-05 11:04:44 -04:00
parent e4d49b0844
commit ea7af90f01
7 changed files with 57 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
resources/assets/js/admin/settings/customCaseList/Tables.vue
View File

@@ -12,9 +12,7 @@
ref="table" ref="table"
> >
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div @mouseenter="updateDataEllipsis(props.row)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div> </div>
<div slot="owner" slot-scope="props"> <div slot="owner" slot-scope="props">
<OwnerCell :data="props.row.owner" /> <OwnerCell :data="props.row.owner" />
@@ -46,10 +44,6 @@ export default {
}, },
data() { data() {
return { return {
dataEllipsis: {
buttons: {}
},
showEllipsis: false,
newList: { newList: {
title: this.$i18n.t("New List"), title: this.$i18n.t("New List"),
class: "btn-success", class: "btn-success",
@@ -278,8 +272,8 @@ export default {
*/ */
updateDataEllipsis(data) { updateDataEllipsis(data) {
let that = this; let that = this;
this.showEllipsis = !this.showEllipsis; return {
this.dataEllipsis = { APP_UID: data.id,
buttons: { buttons: {
note: { note: {
name: "edit", name: "edit",
@@ -313,17 +307,6 @@ export default {
} }
} }
} }
if (this.showEllipsis) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
importCustomCaseList() { importCustomCaseList() {
this.$refs["modal-import"].show(); this.$refs["modal-import"].show();

27
resources/assets/js/components/utils/ellipsis.vue
View File

@@ -3,7 +3,7 @@
<div <div
class="ellipsis-button align-middle" class="ellipsis-button align-middle"
v-show="!showActions" v-show="!showActions"
@mouseover="showActionButtons" @mouseenter="showActionButtons"
> >
<span> <span>
<i class="fas fa-ellipsis-v"></i> <i class="fas fa-ellipsis-v"></i>
@@ -34,6 +34,7 @@
</template> </template>
<script> <script>
import eventBus from "./../../home/EventBus/eventBus"
export default { export default {
name: "Ellipsis", name: "Ellipsis",
props: { props: {
@@ -44,7 +45,16 @@ export default {
showActions: false showActions: false
} }
}, },
mounted () {}, mounted () {
eventBus.$on('closeEllipsis', this.hideActionButtons);
},
deactivated () {
eventBus.$off('closeEllipsis', this.hideActionButtons);
},
destroyed () {
eventBus.$off('closeEllipsis', this.hideActionButtons);
},
methods: { methods: {
/** /**
* Callback function from parent * Callback function from parent
@@ -63,6 +73,7 @@ export default {
this.showActions = true; this.showActions = true;
if (this.showActions) { if (this.showActions) {
if (this.$parent.Row !== undefined) { if (this.$parent.Row !== undefined) {
eventBus.$emit('closeEllipsis', this.data);
for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){ for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15 this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
} }
@@ -82,16 +93,20 @@ export default {
}, },
/** /**
* Hide action buttons * Hide action buttons
* @param {object} dataE
*/ */
hideActionButtons() { hideActionButtons(dataE) {
var i, var i,
elelemts; elelemts;
this.showActions = false;
if (this.$parent.Row !== undefined) { if (this.$parent.Row !== undefined) {
for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){ if (this.data.APP_UID !== dataE.APP_UID) {
this.$parent.$parent.$parent.$children[i].$el.style.opacity = 1 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
}
} }
} else if (this.$parent.item !== undefined) { } else if (this.$parent.item !== undefined) {
this.showActions = false;
if (this.$parent.$parent.$parent.$refs.vueListView !== undefined) { if (this.$parent.$parent.$parent.$refs.vueListView !== undefined) {
elelemts = this.$parent.$el.getElementsByClassName('col-sm-5'); elelemts = this.$parent.$el.getElementsByClassName('col-sm-5');
elelemts[0].style.opacity = 1; elelemts[0].style.opacity = 1;

43
resources/assets/js/home/CustomCaseList/CustomCaseList.vue
View File

@@ -128,14 +128,7 @@
slot="actions" slot="actions"
slot-scope="props" slot-scope="props"
> >
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis
v-if="dataEllipsis"
:data="dataEllipsis"
:ref="'ellipsis' + props.row.APP_UID"
>
</ellipsis>
</div>
</div> </div>
</v-server-table> </v-server-table>
<VueCardView <VueCardView
@@ -160,12 +153,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis
v-if="dataEllipsis"
:data="dataEllipsis">
</ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</b-col> </b-col>
@@ -223,9 +211,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -446,10 +432,6 @@ export default {
PAUSED: this.$i18n.t("ID_PAUSED"), PAUSED: this.$i18n.t("ID_PAUSED"),
UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"), UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
}, },
dataEllipsis: {
buttons: {},
},
showEllipsis: false,
dataSubtitle: { dataSubtitle: {
subtitle: this.data.pageName, subtitle: this.data.pageName,
icon: this.data.pageIcon, icon: this.data.pageIcon,
@@ -1152,19 +1134,8 @@ export default {
* Show options in the ellipsis * Show options in the ellipsis
* @param {objec} data * @param {objec} data
*/ */
updateDataEllipsis(data, view = false) { updateDataEllipsis(data) {
this.showEllipsis = !this.showEllipsis; return this.ellipsisItemFactory(data, this.data.pageParent);
this.dataEllipsis = this.ellipsisItemFactory(data, this.data.pageParent);
if (this.showEllipsis && view) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
/** /**
* Show the alert message * Show the alert message
@@ -1229,6 +1200,7 @@ export default {
let that = this; let that = this;
let dataEllipsisMap = { let dataEllipsisMap = {
inbox: { inbox: {
APP_UID: data.APP_UID,
buttons: { buttons: {
open: { open: {
name: "open", name: "open",
@@ -1261,6 +1233,7 @@ export default {
}, },
}, },
draft: { draft: {
APP_UID: data.APP_UID,
buttons: { buttons: {
open: { open: {
name: "open", name: "open",
@@ -1279,6 +1252,7 @@ export default {
} }
}, },
paused: { paused: {
APP_UID: data.APP_UID,
buttons: { buttons: {
note: { note: {
name: "case note", name: "case note",
@@ -1304,6 +1278,7 @@ export default {
} }
}, },
unassigned: { unassigned: {
APP_UID: data.APP_UID,
buttons: { buttons: {
note: { note: {
name: "case note", name: "case note",

32
resources/assets/js/home/Draft/Draft.vue
View File

@@ -96,9 +96,7 @@
slot="actions" slot="actions"
slot-scope="props" slot-scope="props"
> >
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div> </div>
</v-server-table> </v-server-table>
<VueCardView <VueCardView
@@ -118,9 +116,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -249,9 +245,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -502,10 +496,6 @@ export default {
"PAUSED": this.$i18n.t("ID_PAUSED"), "PAUSED": this.$i18n.t("ID_PAUSED"),
"UNASSIGNED": this.$i18n.t("ID_UNASSIGNED") "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
}, },
dataEllipsis: {
buttons: {}
},
showEllipsis: false,
dataSubtitle: null, dataSubtitle: null,
hiddenItems: ['bySendBy'] hiddenItems: ['bySendBy']
}; };
@@ -806,10 +796,10 @@ export default {
* Show options in the ellipsis * Show options in the ellipsis
* @param {object} data * @param {object} data
*/ */
updateDataEllipsis(data, view = false) { updateDataEllipsis(data) {
let that = this; let that = this;
this.showEllipsis = !this.showEllipsis; return {
this.dataEllipsis = { APP_UID: data.APP_UID,
buttons: { buttons: {
open: { open: {
name: "open", name: "open",
@@ -827,16 +817,6 @@ export default {
}, },
} }
} }
if (this.showEllipsis && view) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
/** /**
* Show the alert message * Show the alert message

32
resources/assets/js/home/Inbox/Inbox.vue
View File

@@ -119,9 +119,7 @@
slot="actions" slot="actions"
slot-scope="props" slot-scope="props"
> >
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div> </div>
</v-server-table> </v-server-table>
<VueCardView <VueCardView
@@ -141,9 +139,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -285,9 +281,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -564,10 +558,6 @@ export default {
PAUSED: this.$i18n.t("ID_PAUSED"), PAUSED: this.$i18n.t("ID_PAUSED"),
UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"), UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
}, },
dataEllipsis: {
buttons: {}
},
showEllipsis: false,
dataSubtitle: null, dataSubtitle: null,
}; };
}, },
@@ -932,10 +922,10 @@ export default {
* Show options in the ellipsis * Show options in the ellipsis
* @param {objec} data * @param {objec} data
*/ */
updateDataEllipsis(data, view = false) { updateDataEllipsis(data) {
let that = this; let that = this;
this.showEllipsis = !this.showEllipsis; return {
this.dataEllipsis = { APP_UID: data.APP_UID,
buttons: { buttons: {
open: { open: {
name: "open", name: "open",
@@ -967,16 +957,6 @@ export default {
} }
} }
} }
if (this.showEllipsis && view) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
/** /**
* Show the alert message * Show the alert message

32
resources/assets/js/home/Paused/Paused.vue
View File

@@ -118,9 +118,7 @@
slot="actions" slot="actions"
slot-scope="props" slot-scope="props"
> >
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div> </div>
</v-server-table> </v-server-table>
<VueCardView <VueCardView
@@ -140,9 +138,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -267,9 +263,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -530,10 +524,6 @@ export default {
"PAUSED": this.$i18n.t("ID_PAUSED"), "PAUSED": this.$i18n.t("ID_PAUSED"),
"UNASSIGNED": this.$i18n.t("ID_UNASSIGNED") "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
}, },
dataEllipsis: {
buttons: {}
},
showEllipsis: false,
dataSubtitle: null dataSubtitle: null
}; };
}, },
@@ -888,10 +878,10 @@ export default {
* Show options in the ellipsis * Show options in the ellipsis
* @param {object} data * @param {object} data
*/ */
updateDataEllipsis(data, view = false) { updateDataEllipsis(data) {
let that = this; let that = this;
this.showEllipsis = !this.showEllipsis; return {
this.dataEllipsis = { APP_UID: data.APP_UID,
buttons: { buttons: {
note: { note: {
name: "case note", name: "case note",
@@ -916,16 +906,6 @@ export default {
} }
} }
} }
if (this.showEllipsis && view) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
/** /**
* Show the alert message * Show the alert message

32
resources/assets/js/home/Unassigned/Unassigned.vue
View File

@@ -107,9 +107,7 @@
slot="actions" slot="actions"
slot-scope="props" slot-scope="props"
> >
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false"> <ellipsis :data="updateDataEllipsis(props.row)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div> </div>
</v-server-table> </v-server-table>
<VueCardView <VueCardView
@@ -129,9 +127,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -273,9 +269,7 @@
</div> </div>
</b-col> </b-col>
<b-col sm="12"> <b-col sm="12">
<div class="ellipsis-container" @mouseover="updateDataEllipsis(props.item)"> <ellipsis class="ellipsis-container" :data="updateDataEllipsis(props.item)"> </ellipsis>
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</div>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>
@@ -549,10 +543,6 @@ export default {
"PAUSED": this.$i18n.t("ID_PAUSED"), "PAUSED": this.$i18n.t("ID_PAUSED"),
"UNASSIGNED": this.$i18n.t("ID_UNASSIGNED") "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
}, },
dataEllipsis: {
buttons: {}
},
showEllipsis: false,
dataSubtitle: null dataSubtitle: null
}; };
}, },
@@ -879,10 +869,10 @@ export default {
* Show options in the ellipsis * Show options in the ellipsis
* @param {object} data * @param {object} data
*/ */
updateDataEllipsis(data, view = false) { updateDataEllipsis(data) {
let that = this; let that = this;
this.showEllipsis = !this.showEllipsis; return {
this.dataEllipsis = { APP_UID: data.APP_UID,
buttons: { buttons: {
note: { note: {
name: "case note", name: "case note",
@@ -900,16 +890,6 @@ export default {
} }
} }
} }
if (this.showEllipsis && view) {
for (let ellipsis in this.$refs) {
if (!ellipsis.indexOf('ellipsis')) {
if (ellipsis !== 'ellipsis' + data.APP_UID) {
this.$refs[ellipsis].hideActionButtons();
}
}
}
this.showEllipsis = false;
}
}, },
/** /**
* Show the alert message * Show the alert message