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 
Complete case list
This commit is contained in:
Fabio Guachalla
2022-08-31 12:34:01 -04:00
parent e3b7d8510d
commit ab5aefc32d
9 changed files with 225 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,8 +12,8 @@
ref="table"
>
<div slot="actions" slot-scope="props">
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseenter="updateDataEllipsis(props.row)" @mouseleave="showEllipsis = false">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div>
<div slot="owner" slot-scope="props">
@@ -279,7 +279,6 @@ export default {
updateDataEllipsis(data) {
let that = this;
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = {
buttons: {
note: {
@@ -314,7 +313,17 @@ 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() {
this.$refs["modal-import"].show();
@@ -323,6 +332,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.float-right {
padding-left: 1.5%;
}

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

@@ -1,5 +1,14 @@
<template>
<div>
<div
class="ellipsis-button align-middle"
v-show="!showActions"
@mouseover="showActionButtons"
>
<span>
<i class="fas fa-ellipsis-v"></i>
</span>
</div>
<div class="float-right" v-show="showActions">
<transition name="fade">
<div
@@ -21,15 +30,6 @@
</div>
</transition>
</div>
<div
class="ellipsis-button align-middle"
v-show="!showActions"
@mouseover="showActionButtons"
>
<span>
<i class="fas fa-ellipsis-v"></i>
</span>
</div>
</div>
</template>
@@ -124,6 +124,7 @@ export default {
z-index: 999;
display: inline-flex !important;
opacity: 1 !important;
height: 50px !important;
}
.btn-outline-info {
border: none;

3
resources/assets/js/home/AdvancedSearch/AdvancedSearch.vue
View File

@@ -662,6 +662,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.VuePagination__count {
display: none;
}

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

@@ -128,10 +128,11 @@
slot="actions"
slot-scope="props"
>
<div @mouseover="updateDataEllipsis(props.row)">
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
<ellipsis
v-if="dataEllipsis"
:data="dataEllipsis"
:ref="'ellipsis' + props.row.APP_UID"
>
</ellipsis>
</div>
@@ -1151,10 +1152,18 @@ export default {
* Show options in the ellipsis
* @param {objec} data
*/
updateDataEllipsis(data) {
updateDataEllipsis(data, view = false) {
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
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;
}
},
/**
@@ -1334,6 +1343,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-todo {
padding-top: 20px;
padding-bottom: 20px;

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

@@ -96,8 +96,8 @@
slot="actions"
slot-scope="props"
>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -806,10 +806,9 @@ export default {
* Show options in the ellipsis
* @param {object} data
*/
updateDataEllipsis(data) {
updateDataEllipsis(data, view = false) {
let that = this;
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = {
buttons: {
open: {
@@ -828,6 +827,15 @@ 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;
}
},
/**
@@ -884,6 +892,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-draft {
padding-top: 20px;
padding-bottom: 20px;

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

@@ -119,8 +119,8 @@
slot="actions"
slot-scope="props"
>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -932,10 +932,9 @@ export default {
* Show options in the ellipsis
* @param {objec} data
*/
updateDataEllipsis(data) {
updateDataEllipsis(data, view = false) {
let that = this;
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = {
buttons: {
open: {
@@ -968,6 +967,15 @@ 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;
}
},
/**
@@ -1024,6 +1032,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-todo {
padding-top: 20px;
padding-bottom: 20px;

8
resources/assets/js/home/MyCases/MyCases.vue
View File

@@ -796,15 +796,13 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-mycases {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
}
/*.btn-clear-sort {
position: fixed;
margin-top: 16px;
margin-left: -11px;
}*/
</style>

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

@@ -118,8 +118,8 @@
slot="actions"
slot-scope="props"
>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -888,10 +888,9 @@ export default {
* Show options in the ellipsis
* @param {object} data
*/
updateDataEllipsis(data) {
updateDataEllipsis(data, view = false) {
let that = this;
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = {
buttons: {
note: {
@@ -917,6 +916,15 @@ 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;
}
},
/**
@@ -973,6 +981,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-paused {
padding-top: 20px;
padding-bottom: 20px;

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

@@ -107,8 +107,8 @@
slot="actions"
slot-scope="props"
>
<div @mouseover="updateDataEllipsis(props.row)">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
<div @mouseenter="updateDataEllipsis(props.row, view = true)" @mouseleave="showEllipsis = false">
<ellipsis v-if="dataEllipsis" :data="dataEllipsis" :ref="'ellipsis' + props.row.APP_UID"> </ellipsis>
</div>
</div>
</v-server-table>
@@ -879,10 +879,9 @@ export default {
* Show options in the ellipsis
* @param {object} data
*/
updateDataEllipsis(data) {
updateDataEllipsis(data, view = false) {
let that = this;
this.showEllipsis = !this.showEllipsis;
if (this.showEllipsis) {
this.dataEllipsis = {
buttons: {
note: {
@@ -901,6 +900,15 @@ 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;
}
},
/**
@@ -957,6 +965,9 @@ export default {
};
</script>
<style>
.VueTables__row {
height: 75px;
}
.v-container-unassigned {
padding-top: 20px;
padding-bottom: 20px;