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

Merged in feature/PMCORE-3077 (pull request #7969)

Browse Source 
PMCORE-3077

Approved-by: Rodrigo Quelca
This commit is contained in:
Fabio Guachalla
2021-07-09 20:42:11 +00:00
committed by Rodrigo Quelca
parent 072b06d899 19f30b4635
commit d4ad9210ef
5 changed files with 327 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
resources/assets/js/components/utils/ellipsis.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<div class="float-right">
<transition name="fade">
<div
class="v-inline"
v-show="showActions"
>
<div class="buttonGroup" @focus="hidebuttonsAction()">
<b-button
v-if="data.showClaim"
variant="outline-info"
@click="claimCase"
>
<i class="fas fa-briefcase"></i>
</b-button>
<b-button
v-if="data.showOpen"
variant="outline-info"
@click="openCase"
>
<i class="far fa-edit"></i>
</b-button>
<b-button
v-show="data.showPlay"
variant="outline-info"
@click="unPauseCase"
>
<i class="far fa-play-circle"></i>
</b-button>
<b-button
v-show="data.showPause"
variant="outline-info"
@click="pauseCase"
>
<i class="far fa-pause-circle"></i>
</b-button>
<b-button
v-show="data.showReassign"
variant="outline-info"
@click="reassingCase"
>
<i class="fas fa-redo"></i>
</b-button>
<b-button
v-show="data.showNote"
variant="outline-info"
@click="openCaseNote"
>
<i class="far fa-comments"></i>
</b-button>
</div>
</div>
</transition>
<div class="ellipsis-button">
<div @click="showActionButtons()">
<i class="fas fa-ellipsis-v"></i>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Ellipsis",
props: {
data: Object
},
data () {
return {
showActions: false
}
},
methods: {
/**
* Show the action buttons by row
*/
showActionButtons() {
var i;
this.showActions = !this.showActions;
if (this.showActions) {
for (i = 0; i < this.$parent.$parent.$parent.$children.length -1 ; i++){
this.$parent.$parent.$parent.$children[i].$el.style.opacity = 0.15
}
} else {
this.hideActionButtons();
}
},
/**
* Hide action buttons
*/
hideActionButtons() {
var i;
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
}
},
/**
* Call the event to reassign a case
*/
reassingCase() {
this.hideActionButtons();
console.log("Action Reassing Case");
console.log(this.data);
},
/**
* Call the event to open a case
*/
openCase() {
this.hideActionButtons();
console.log("Action Open Case");
console.log(this.data);
},
/**
* Call the event to unpause a case
*/
unPauseCase() {
this.hideActionButtons();
console.log("Action Unpause Case");
console.log(this.data);
},
/**
* Call the event to pause a case
*/
pauseCase() {
this.hideActionButtons();
console.log("Action Pause Case");
console.log(this.data);
},
/**
* Call the event to open case note
*/
openCaseNote() {
this.hideActionButtons();
console.log("Action Case Note");
console.log(this.data);
},
/**
* Call the event to claim a case
*/
claimCase() {
this.hideActionButtons();
console.log("Action Claim Case");
console.log(this.data);
}
}
}
</script>
<style>
.v-btn-request {
display: inline-block;
}
.v-inline {
display: inline-block;
}
.ellipsis-button {
font-size: 22px;
width: 15px;
text-align: center;
float: inherit;
margin-top: 9px;
}
.buttonGroup {
position: relative;
flex-direction: row-reverse;
width: 0px;
z-index: 999999;
display: inline-flex !important;
}
.btn-outline-info {
border: none;
font-size: 25px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
position: relative;
}
.fade-enter, .fade-leave-to {
opacity: 0;
position: relative;
}
</style>

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

@@ -34,9 +34,9 @@
</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">
<button class="btn btn-success btn-sm" @click="openCase(props.row)"> <div @click="updateDataEllipsis(props.row)">
{{ $t("ID_OPEN_CASE") }} <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</button> </div>
</div> </div>
</v-server-table> </v-server-table>
</div> </div>
@@ -50,6 +50,7 @@ import CasesFilter from "../components/search/CasesFilter";
import TaskCell from "../components/vuetable/TaskCell.vue"; import TaskCell from "../components/vuetable/TaskCell.vue";
import api from "./../api/index"; import api from "./../api/index";
import utils from "./../utils/utils"; import utils from "./../utils/utils";
import Ellipsis from '../components/utils/ellipsis.vue';
export default { export default {
name: "Draft", name: "Draft",
@@ -59,6 +60,7 @@ export default {
ModalNewRequest, ModalNewRequest,
TaskCell, TaskCell,
CasesFilter, CasesFilter,
Ellipsis,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "filters"],
data() { data() {
@@ -120,7 +122,8 @@ export default {
"DRAFT": this.$i18n.t("ID_IN_DRAFT"), "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
"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: null,
}; };
}, },
created() { created() {
@@ -128,6 +131,7 @@ export default {
}, },
mounted() { mounted() {
this.openDefaultCase(); this.openDefaultCase();
this.setDataEllipsis();
}, },
watch: {}, watch: {},
computed: { computed: {
@@ -323,6 +327,34 @@ export default {
*/ */
updateView(){ updateView(){
this.$refs["vueTable"].getData(); this.$refs["vueTable"].getData();
},
/**
* set data by default in the ellipsis component
*/
setDataEllipsis() {
this.dataEllipsis = {
showNote: false,
showReassign: false,
showPause: false,
showPlay: false,
showOpen: false,
showClaim: false
}
},
/**
*
*/
updateDataEllipsis(data) {
this.dataEllipsis = {
APP_UID: data.APP_UID || "",
PRO_UID: data.PRO_UID || "",
showOpen: true,
showNote: true,
showPlay: false,
showReassign: false,
showPause: false,
showClaim: false
};
} }
}, },
}; };

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

@@ -44,12 +44,9 @@
</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">
<button <div @click="updateDataEllipsis(props.row)">
class="btn btn-success btn-sm" <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
@click="showModalUnpauseCase(props.row)" </div>
>
{{ $t("ID_UNPAUSE") }}
</button>
</div> </div>
</v-server-table> </v-server-table>
<ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase> <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
@@ -65,6 +62,7 @@ import TaskCell from "../components/vuetable/TaskCell.vue";
import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue"; import ModalUnpauseCase from "./modal/ModalUnpauseCase.vue";
import api from "./../api/index"; import api from "./../api/index";
import utils from "./../utils/utils"; import utils from "./../utils/utils";
import Ellipsis from '../components/utils/ellipsis.vue';
export default { export default {
name: "Paused", name: "Paused",
@@ -75,6 +73,7 @@ export default {
TaskCell, TaskCell,
ModalUnpauseCase, ModalUnpauseCase,
CasesFilter, CasesFilter,
Ellipsis,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "filters"],
data() { data() {
@@ -142,7 +141,8 @@ export default {
"DRAFT": this.$i18n.t("ID_IN_DRAFT"), "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
"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: null,
}; };
}, },
created() { created() {
@@ -151,6 +151,7 @@ export default {
mounted() { mounted() {
// force to open case // force to open case
this.openDefaultCase(); this.openDefaultCase();
this.setDataEllipsis();
}, },
watch: {}, watch: {},
computed: { computed: {
@@ -357,6 +358,34 @@ export default {
*/ */
updateView(){ updateView(){
this.$refs["vueTable"].getData(); this.$refs["vueTable"].getData();
},
/**
* set data by default in the ellipsis component
*/
setDataEllipsis() {
this.dataEllipsis = {
showNote: false,
showReassign: false,
showPause: false,
showPlay: false,
showOpen: false,
showClaim: false
}
},
/**
*
*/
updateDataEllipsis(data) {
this.dataEllipsis = {
APP_UID: data.APP_UID || "",
PRO_UID: data.PRO_UID || "",
showOpen: false,
showNote: true,
showPlay: true,
showReassign: true,
showPause: false,
showClaim: false
};
} }
}, },
}; };

40
resources/assets/js/home/Todo.vue
View File

@@ -44,9 +44,9 @@
</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">
<button class="btn btn-success btn-sm" @click="openCase(props.row)"> <div @click="updateDataEllipsis(props.row)">
{{ $t("ID_OPEN_CASE") }} <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</button> </div>
</div> </div>
</v-server-table> </v-server-table>
</div> </div>
@@ -60,6 +60,7 @@ import TaskCell from "../components/vuetable/TaskCell.vue";
import CasesFilter from "../components/search/CasesFilter"; import CasesFilter from "../components/search/CasesFilter";
import api from "./../api/index"; import api from "./../api/index";
import utils from "./../utils/utils"; import utils from "./../utils/utils";
import Ellipsis from '../components/utils/ellipsis.vue';
export default { export default {
name: "Todo", name: "Todo",
@@ -69,6 +70,7 @@ export default {
ModalNewRequest, ModalNewRequest,
TaskCell, TaskCell,
CasesFilter, CasesFilter,
Ellipsis,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "filters"],
data() { data() {
@@ -136,7 +138,8 @@ export default {
"DRAFT": this.$i18n.t("ID_IN_DRAFT"), "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
"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: null
}; };
}, },
created() { created() {
@@ -145,6 +148,7 @@ export default {
mounted() { mounted() {
// force to open case // force to open case
this.openDefaultCase(); this.openDefaultCase();
this.setDataEllipsis();
}, },
watch: {}, watch: {},
computed: { computed: {
@@ -348,6 +352,34 @@ export default {
*/ */
updateView(){ updateView(){
this.$refs["vueTable"].getData(); this.$refs["vueTable"].getData();
},
/**
* set data by default in the ellipsis component
*/
setDataEllipsis() {
this.dataEllipsis = {
showNote: false,
showReassign: false,
showPause: false,
showPlay: false,
showOpen: false,
showClaim: false
}
},
/**
*
*/
updateDataEllipsis(data) {
this.dataEllipsis = {
APP_UID: data.APP_UID || "",
PRO_UID: data.PRO_UID || "",
showOpen: true,
showNote: true,
showPlay: false,
showReassign: true,
showPause: true,
showClaim: false
};
} }
}, },
}; };

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

@@ -41,9 +41,9 @@
</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">
<button class="btn btn-success btn-sm" @click="claimCase(props.row)"> <div @click="updateDataEllipsis(props.row)">
{{ $t("ID_CLAIM") }} <ellipsis v-if="dataEllipsis" :data="dataEllipsis"> </ellipsis>
</button> </div>
</div> </div>
</v-server-table> </v-server-table>
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase> <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
@@ -59,6 +59,7 @@ import CasesFilter from "../components/search/CasesFilter";
import ModalClaimCase from "./modal/ModalClaimCase.vue"; import ModalClaimCase from "./modal/ModalClaimCase.vue";
import api from "./../api/index"; import api from "./../api/index";
import utils from "./../utils/utils"; import utils from "./../utils/utils";
import Ellipsis from '../components/utils/ellipsis.vue';
export default { export default {
name: "Unassigned", name: "Unassigned",
@@ -69,6 +70,7 @@ export default {
TaskCell, TaskCell,
ModalClaimCase, ModalClaimCase,
CasesFilter, CasesFilter,
Ellipsis,
}, },
props: ["defaultOption", "filters"], props: ["defaultOption", "filters"],
data() { data() {
@@ -137,11 +139,13 @@ export default {
"DRAFT": this.$i18n.t("ID_IN_DRAFT"), "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
"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: null,
}; };
}, },
mounted() { mounted() {
this.initFilters(); this.initFilters();
this.setDataEllipsis();
}, },
watch: {}, watch: {},
computed: { computed: {
@@ -328,6 +332,34 @@ export default {
*/ */
updateView(){ updateView(){
this.$refs["vueTable"].getData(); this.$refs["vueTable"].getData();
},
/**
* set data by default in the ellipsis component
*/
setDataEllipsis() {
this.dataEllipsis = {
showNote: false,
showReassign: false,
showPause: false,
showPlay: false,
showOpen: false,
showClaim: false
}
},
/**
*
*/
updateDataEllipsis(data) {
this.dataEllipsis = {
APP_UID: data.APP_UID || "",
PRO_UID: data.PRO_UID || "",
showOpen: false,
showNote: true,
showPlay: false,
showReassign: false,
showPause: true,
showClaim: true
};
} }
}, },
}; };