|
|
|
@ -1,7 +1,12 @@
|
|
|
|
|
<template> |
|
|
|
|
<v-container fluid> |
|
|
|
|
<kanban-board :stages="kanban.groupingColumnItems" :blocks="kanban.blocks" @update-block="updateBlock"> |
|
|
|
|
<div v-for="stage in this.kanban.groupingColumnItems" :slot="stage" :key="stage" class="mx-auto"> |
|
|
|
|
<v-container fluid class="h-100 d-100" style="overflow:auto "> |
|
|
|
|
<kanban-board |
|
|
|
|
:stages="kanban.groupingColumnItems" |
|
|
|
|
:blocks="kanban.blocks" |
|
|
|
|
class="h-100 my-0 mx-n2" |
|
|
|
|
@update-block="updateBlock" |
|
|
|
|
> |
|
|
|
|
<div v-for="stage in kanban.groupingColumnItems" :slot="stage" :key="stage" class="mx-auto"> |
|
|
|
|
<enum-cell :value="stage" :column="groupingFieldColumn" /> |
|
|
|
|
</div> |
|
|
|
|
<div v-for="(block) in kanban.blocks" :slot="block.id" :key="block.c_pk" class="caption"> |
|
|
|
@ -65,10 +70,11 @@
|
|
|
|
|
tooltip="Add a new record" |
|
|
|
|
color="primary" |
|
|
|
|
class="primary" |
|
|
|
|
small |
|
|
|
|
x-small |
|
|
|
|
fab |
|
|
|
|
@click="insertNewRow(true, true, {[groupingField]: stage})" |
|
|
|
|
> |
|
|
|
|
<v-icon small left> |
|
|
|
|
<v-icon small> |
|
|
|
|
mdi-plus |
|
|
|
|
</v-icon> |
|
|
|
|
</x-btn> |
|
|
|
@ -86,8 +92,9 @@
|
|
|
|
|
</v-icon> |
|
|
|
|
New Stack |
|
|
|
|
</x-btn> --> |
|
|
|
|
<div class="record-cnt"> |
|
|
|
|
{{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }} {{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }} |
|
|
|
|
<div class="record-cnt caption grey--text"> |
|
|
|
|
{{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }} |
|
|
|
|
{{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</kanban-board> |
|
|
|
@ -100,6 +107,7 @@ import HeaderCell from '../components/headerCell'
|
|
|
|
|
import VirtualCell from '../components/virtualCell' |
|
|
|
|
import TableCell from '../components/cell' |
|
|
|
|
import EnumCell from '../components/cell/enumCell' |
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
|
name: 'KanbanView', |
|
|
|
|
components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell, EnumCell }, |
|
|
|
@ -114,19 +122,8 @@ export default {
|
|
|
|
|
'showSystemFields', |
|
|
|
|
'sqlUi', |
|
|
|
|
'groupingField', |
|
|
|
|
'api', |
|
|
|
|
'api' |
|
|
|
|
], |
|
|
|
|
mounted() { |
|
|
|
|
const kbListElements = document.querySelectorAll('.drag-inner-list'); |
|
|
|
|
kbListElements.forEach(kbListEle => { |
|
|
|
|
kbListEle.addEventListener('scroll', async (e) => { |
|
|
|
|
if(kbListEle.scrollTop + kbListEle.clientHeight >= kbListEle.scrollHeight) { |
|
|
|
|
const groupingFieldVal = kbListEle.getAttribute('data-status') |
|
|
|
|
this.$emit('loadMoreKanbanData', groupingFieldVal) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
fields() { |
|
|
|
|
if (this.availableColumns) { |
|
|
|
@ -142,7 +139,18 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
groupingFieldColumn() { |
|
|
|
|
return this.fields.filter(o => o.alias === this.groupingField)[0] |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
const kbListElements = document.querySelectorAll('.drag-inner-list') |
|
|
|
|
kbListElements.forEach((kbListEle) => { |
|
|
|
|
kbListEle.addEventListener('scroll', async(e) => { |
|
|
|
|
if (kbListEle.scrollTop + kbListEle.clientHeight >= kbListEle.scrollHeight) { |
|
|
|
|
const groupingFieldVal = kbListEle.getAttribute('data-status') |
|
|
|
|
this.$emit('loadMoreKanbanData', groupingFieldVal) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
async updateBlock(c_pk, status) { |
|
|
|
@ -201,7 +209,7 @@ export default {
|
|
|
|
|
}, |
|
|
|
|
insertNewRow(atEnd = false, expand = false, presetValues = {}) { |
|
|
|
|
this.$emit('insertNewRow', atEnd, expand, presetValues) |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
@ -213,7 +221,6 @@ export default {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
ul.drag-inner-list { |
|
|
|
|
height: 400px; |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -224,7 +231,7 @@ export default {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag-container { |
|
|
|
|
max-width: 1000px; |
|
|
|
|
//max-width: 1000px; |
|
|
|
|
margin: 20px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -253,13 +260,13 @@ export default {
|
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag-column-footer .v-btn { |
|
|
|
|
/* .drag-column-footer .v-btn { |
|
|
|
|
border-radius: 50%; |
|
|
|
|
border: 2px solid; |
|
|
|
|
padding: 0px 0px 0px 6px; |
|
|
|
|
min-width: 40px; |
|
|
|
|
min-height: 38px; |
|
|
|
|
} |
|
|
|
|
}*/ |
|
|
|
|
|
|
|
|
|
.drag-column-footer .record-cnt { |
|
|
|
|
height: 38px; |
|
|
|
@ -372,10 +379,31 @@ export default {
|
|
|
|
|
.kanban-col { |
|
|
|
|
padding: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag-container { |
|
|
|
|
display: inline-block; |
|
|
|
|
.drag-list { |
|
|
|
|
height: 100%; |
|
|
|
|
display: inline-flex; |
|
|
|
|
|
|
|
|
|
.drag-column { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
max-height: max(400px,100%); |
|
|
|
|
|
|
|
|
|
.drag-inner-list { |
|
|
|
|
overflow-y: auto; |
|
|
|
|
overflow-x: hidden; |
|
|
|
|
min-height: 200px; |
|
|
|
|
flex-grow: 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- |
|
|
|
|
/** |
|
|
|
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
|
|
|