74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div v-if="data.length" class="task-cell">
|
|
<div
|
|
v-for="(item, index) in data"
|
|
v-bind:key = index
|
|
class="d-flex">
|
|
<div
|
|
v-bind:style="{ color: activeColor(item.CODE_COLOR) }"
|
|
:id="statusId + index"
|
|
>
|
|
<i class="fas fa-square"></i>
|
|
</div>
|
|
<b-popover
|
|
v-if="item.DELAYED_TITLE && item.DELAYED_MSG"
|
|
:target="statusId + index"
|
|
triggers="hover"
|
|
placement="top"
|
|
>
|
|
<b> {{ item.DELAYED_TITLE }} </b> {{ item.DELAYED_MSG }}
|
|
</b-popover>
|
|
<div class="col ellipsis" v-b-popover.hover.top="item.TITLE">
|
|
{{ item.TITLE }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "TaskCell",
|
|
props: ["data"],
|
|
data() {
|
|
return {
|
|
colorMap: ["green", "red", "orange", "blue", "silver"],
|
|
statusId: "status-" + _.random(1000000)
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* Get the style color to be applied in the square icon
|
|
* @param {number} - status color(1-5)
|
|
* @return {string} - color atribute string
|
|
*/
|
|
activeColor: function(codeColor) {
|
|
return this.colorMap[codeColor - 1];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.popover {
|
|
max-width: 600px !important;
|
|
min-width: 200px !important;
|
|
}
|
|
.task-cell {
|
|
font-size: normal;
|
|
}
|
|
|
|
.ellipsis {
|
|
white-space: nowrap;
|
|
width: 140px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.color {
|
|
color: red;
|
|
}
|
|
.avatar {
|
|
color: "red";
|
|
width: "1.3em";
|
|
}
|
|
</style>
|