github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: kanban ui update 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/914/head
Pranav C 3 years ago
parent
cfabc58456
commit
abec8fcfe5
2 changed files with 105 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      packages/nc-gui/components/global/xBtn.vue
  2. 172
      packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue

8
packages/nc-gui/components/global/xBtn.vue
Unescape View File

@ -2,9 +2,11 @@
<v-tooltip v-if="tooltip || $slots['tooltip']" v-bind="tooltipProp"> <v-tooltip v-if="tooltip || $slots['tooltip']" v-bind="tooltipProp">
<template #activator="{ on }"> <template #activator="{ on }">
<v-btn :class="[btnClass,$attrs['btn.class']]" v-bind="$attrs" v-on="{...$listeners,...on}"> <v-btn :class="[btnClass,$attrs['btn.class']]" v-bind="$attrs" v-on="{...$listeners,...on}">
<v-icon v-if="icon" small> <template v-if="icon">
{{ icon }} <v-icon small>
</v-icon>&nbsp; {{ icon }}
</v-icon>&nbsp;
</template>
<slot /> <slot />
</v-btn> </v-btn>
</template> </template>

172
packages/nc-gui/components/project/spreadsheet/views/kanbanView.vue
Unescape View File

@ -1,74 +1,80 @@
<template> <template>
<v-container fluid> <v-container fluid class="h-100 d-100" style="overflow:auto ">
<kanban-board :stages="kanban.groupingColumnItems" :blocks="kanban.blocks" @update-block="updateBlock"> <kanban-board
<div v-for="stage in this.kanban.groupingColumnItems" :slot="stage" :key="stage" class="mx-auto"> :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" /> <enum-cell :value="stage" :column="groupingFieldColumn" />
</div> </div>
<div v-for="(block) in kanban.blocks" :slot="block.id" :key="block.c_pk" class="caption"> <div v-for="(block) in kanban.blocks" :slot="block.id" :key="block.c_pk" class="caption">
<v-hover v-slot="{hover}"> <v-hover v-slot="{hover}">
<v-card <v-card
class="h-100" class="h-100"
:elevation="hover ? 4 : 1" :elevation="hover ? 4 : 1"
@click="$emit('expandKanbanForm', {rowIdx: block.c_pk})" @click="$emit('expandKanbanForm', {rowIdx: block.c_pk})"
> >
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row class=""> <v-row class="">
<v-col <v-col
v-for="(col) in fields" v-for="(col) in fields"
v-show="showFields[col.alias|| col._cn]" v-show="showFields[col.alias|| col._cn]"
:key="col.alias || col._cn" :key="col.alias || col._cn"
class="kanban-col col-12" class="kanban-col col-12"
> >
<label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize caption grey--text"> <label :for="`data-table-form-${col._cn}`" class="body-2 text-capitalize caption grey--text">
<virtual-header-cell <virtual-header-cell
v-if="col.virtual"
:column="col"
:nodes="nodes"
:is-form="true"
:meta="meta"
/>
<header-cell
v-else
:is-form="true"
:value="col._cn"
:column="col"
/>
</label>
<virtual-cell
v-if="col.virtual" v-if="col.virtual"
ref="virtual"
:column="col" :column="col"
:row="block"
:nodes="nodes" :nodes="nodes"
:is-form="true"
:meta="meta" :meta="meta"
/> />
<table-cell <header-cell
v-else v-else
:value="block[col._cn]" :is-form="true"
:value="col._cn"
:column="col" :column="col"
:sql-ui="sqlUi"
class="xc-input body-2"
:meta="meta"
/> />
</v-col> </label>
</v-row> <virtual-cell
</v-container> v-if="col.virtual"
</v-card-text> ref="virtual"
</v-card> :column="col"
</v-hover> :row="block"
:nodes="nodes"
:meta="meta"
/>
<table-cell
v-else
:value="block[col._cn]"
:column="col"
:sql-ui="sqlUi"
class="xc-input body-2"
:meta="meta"
/>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
</v-hover>
</div> </div>
<div v-for="stage in kanban.groupingColumnItems" :key="stage" :slot="`footer-${stage}`" class="kanban-footer"> <div v-for="stage in kanban.groupingColumnItems" :key="stage" :slot="`footer-${stage}`" class="kanban-footer">
<x-btn <x-btn
v-if="stage" v-if="stage"
outlined outlined
tooltip="Add a new record" tooltip="Add a new record"
color="primary" color="primary"
class="primary" class="primary"
small x-small
fab
@click="insertNewRow(true, true, {[groupingField]: stage})" @click="insertNewRow(true, true, {[groupingField]: stage})"
> >
<v-icon small left> <v-icon small>
mdi-plus mdi-plus
</v-icon> </v-icon>
</x-btn> </x-btn>
@ -86,8 +92,9 @@
</v-icon> </v-icon>
New Stack New Stack
</x-btn> --> </x-btn> -->
<div class="record-cnt"> <div class="record-cnt caption grey--text">
{{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }} {{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }} {{ kanban.recordCnt[stage] }} / {{ kanban.recordTotalCnt[stage] }}
{{ kanban.recordTotalCnt[stage] > 1 ? "records" : "record" }}
</div> </div>
</div> </div>
</kanban-board> </kanban-board>
@ -100,6 +107,7 @@ import HeaderCell from '../components/headerCell'
import VirtualCell from '../components/virtualCell' import VirtualCell from '../components/virtualCell'
import TableCell from '../components/cell' import TableCell from '../components/cell'
import EnumCell from '../components/cell/enumCell' import EnumCell from '../components/cell/enumCell'
export default { export default {
name: 'KanbanView', name: 'KanbanView',
components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell, EnumCell }, components: { TableCell, VirtualCell, HeaderCell, VirtualHeaderCell, EnumCell },
@ -114,19 +122,8 @@ export default {
'showSystemFields', 'showSystemFields',
'sqlUi', 'sqlUi',
'groupingField', '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: { computed: {
fields() { fields() {
if (this.availableColumns) { if (this.availableColumns) {
@ -142,7 +139,18 @@ export default {
}, },
groupingFieldColumn() { groupingFieldColumn() {
return this.fields.filter(o => o.alias === this.groupingField)[0] 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: { methods: {
async updateBlock(c_pk, status) { async updateBlock(c_pk, status) {
@ -201,7 +209,7 @@ export default {
}, },
insertNewRow(atEnd = false, expand = false, presetValues = {}) { insertNewRow(atEnd = false, expand = false, presetValues = {}) {
this.$emit('insertNewRow', atEnd, expand, presetValues) this.$emit('insertNewRow', atEnd, expand, presetValues)
}, }
} }
} }
</script> </script>
@ -213,7 +221,6 @@ export default {
} }
ul.drag-inner-list { ul.drag-inner-list {
height: 400px;
overflow-y: scroll; overflow-y: scroll;
} }
@ -224,7 +231,7 @@ export default {
} }
.drag-container { .drag-container {
max-width: 1000px; //max-width: 1000px;
margin: 20px 0px; margin: 20px 0px;
} }
@ -253,13 +260,13 @@ export default {
text-align: center; text-align: center;
} }
.drag-column-footer .v-btn { /* .drag-column-footer .v-btn {
border-radius: 50%; border-radius: 50%;
border: 2px solid; border: 2px solid;
padding: 0px 0px 0px 6px; padding: 0px 0px 0px 6px;
min-width: 40px; min-width: 40px;
min-height: 38px; min-height: 38px;
} }*/
.drag-column-footer .record-cnt { .drag-column-footer .record-cnt {
height: 38px; height: 38px;
@ -369,13 +376,34 @@ export default {
opacity: 0.2; opacity: 0.2;
} }
.kanban-col { .kanban-col {
padding: 10px; 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> </style>
<!-- <!--
/** /**
* @copyright Copyright (c) 2021, Xgene Cloud Ltd * @copyright Copyright (c) 2021, Xgene Cloud Ltd

Write Preview
Loading…
Cancel
Save