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