verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 68 Releases Wiki Activity

Improve drag and drop borders status
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
William Buezas 2024-02-16 09:24:31 -03:00
parent c322bfb46c
commit 0761860b37
1 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/pages/Travel/ExtraCommunity.vue
View File

@ -384,6 +384,7 @@ const cleanDragAndDropData = () => {
class="full-width" class="full-width"
table-style="user-select: none;" table-style="user-select: none;"
@dragend="cleanDragAndDropData()" @dragend="cleanDragAndDropData()"
:separator="!targetRowIndex && targetRowIndex !== 0 ? 'horizontal' : 'none'"
> >
<template #body="props"> <template #body="props">
<QTr <QTr
@ -393,13 +394,19 @@ const cleanDragAndDropData = () => {
@dragenter="handleDragEnter($event, props.rowIndex)" @dragenter="handleDragEnter($event, props.rowIndex)"
@dragover="handleDragOver($event)" @dragover="handleDragOver($event)"
@drop="handleDrop()" @drop="handleDrop()"
:class="{
'dashed-border --top --left --right':
targetRowIndex === props.rowIndex,
'--bottom':
targetRowIndex === props.rowIndex &&
(!props.row.entries || props.row.entries.length === 0),
}"
> >
<QTd <QTd
v-for="col in props.cols" v-for="col in props.cols"
:key="col.name" :key="col.name"
:props="props" :props="props"
@click="stopEventPropagation($event, col)" @click="stopEventPropagation($event, col)"
:class="{ 'dashed-border': targetRowIndex === props.rowIndex }"
auto-width auto-width
> >
<component <component
@ -454,9 +461,13 @@ const cleanDragAndDropData = () => {
:class="{ :class="{
'dragged-row': 'dragged-row':
entryRowIndex === index && props.rowIndex === draggedRowIndex, entryRowIndex === index && props.rowIndex === draggedRowIndex,
'dashed-border --left --right': targetRowIndex === props.rowIndex,
'--bottom':
targetRowIndex === props.rowIndex &&
index === props.row.entries.length - 1,
}" }"
> >
<QTd class="row justify-center"> <QTd>
<QBtn flat color="primary">{{ entry.id }} </QBtn> <QBtn flat color="primary">{{ entry.id }} </QBtn>
<EntryDescriptorProxy :id="entry.id" /> <EntryDescriptorProxy :id="entry.id" />
</QTd> </QTd>
@ -464,27 +475,27 @@ const cleanDragAndDropData = () => {
<QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn> <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
<SupplierDescriptorProxy :id="entry.supplierFk" /> <SupplierDescriptorProxy :id="entry.supplierFk" />
</QTd> </QTd>
<QTd />
<QTd>
<span>{{ toCurrency(entry.invoiceAmount) }}</span>
</QTd>
<QTd>
<span>{{ entry.reference }}</span>
</QTd>
<QTd>
<span>{{ entry.stickers }}</span>
</QTd>
<QTd></QTd> <QTd></QTd>
<QTd <QTd>
><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd <span>{{ entry.loadedkg }}</span>
> </QTd>
<QTd <QTd>
><span>{{ entry.reference }}</span></QTd <span>{{ entry.volumeKg }}</span>
> </QTd>
<QTd <QTd />
><span>{{ entry.stickers }}</span></QTd <QTd />
> <QTd />
<QTd></QTd> <QTd />
<QTd
><span>{{ entry.loadedkg }}</span></QTd
>
<QTd
><span>{{ entry.volumeKg }}</span></QTd
>
<QTd></QTd>
<QTd></QTd>
<QTd></QTd>
<QTd></QTd>
</QTr> </QTr>
</template> </template>
</QTable> </QTable>
@ -492,16 +503,25 @@ const cleanDragAndDropData = () => {
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.dashed-border { ::v-deep .q-table {
border-bottom: 1px dashed #ccc !important; border-collapse: collapse;
border-top: 1px dashed #ccc !important; }
&:first-child { .dashed-border {
border-left: 1px dashed #ccc !important; &.--left {
border-left: 1px dashed #ccc;
} }
&:last-child { &.--right {
border-right: 1px dashed #ccc !important; border-right: 1px dashed #ccc;
}
&.--top {
border-top: 1px dashed #ccc;
}
&.--bottom {
border-bottom: 1px dashed #ccc;
} }
} }