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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/js/admin/Modals/ModalDeleteCaseList.vue
View File

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

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

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

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

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

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

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

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

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

2
resources/assets/js/home/Home.vue
View File

@@ -295,7 +295,7 @@ export default {
} else { } else {
this.page = "MyCases"; 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.cleanDefaultOption();
this.showAlert(this.$i18n.t("ID_NO_PERMISSION_NO_PARTICIPATED_CASES")); this.showAlert(this.$i18n.t("ID_NO_PERMISSION_NO_PARTICIPATED_CASES"));
} }

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

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

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

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

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

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

1
resources/assets/js/home/modal/ModalClaimCase.vue
View File

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

1
resources/assets/js/home/modal/ModalPauseCase.vue
View File

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

1
resources/assets/js/home/modal/ModalReassignCase.vue
View File

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

1
resources/assets/js/home/modal/ModalUnpauseCase.vue
View File

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