From fe91e27ec8490879974183a7c898f089834ed99d Mon Sep 17 00:00:00 2001
From: alexisben <alexiben7@gmail.com>
Date: Wed, 29 Jun 2022 16:48:25 +0200
Subject: [PATCH] Datatable block : Upgrade and fix draggable
---
app/assets/stylesheets/commons/_block.sass | 26 +++++++-
.../blocks/templates/datatable/_edit.html.erb | 62 +++++++++----------
2 files changed, 55 insertions(+), 33 deletions(-)
diff --git a/app/assets/stylesheets/commons/_block.sass b/app/assets/stylesheets/commons/_block.sass
index 6d8fcdc1a..a76ade84f 100644
--- a/app/assets/stylesheets/commons/_block.sass
+++ b/app/assets/stylesheets/commons/_block.sass
@@ -3,4 +3,28 @@
display: none
[data-v-app]
.spinner-border
- display: none
\ No newline at end of file
+ display: none
+
+.fake-table
+ display: table
+ border-collapse: collapse
+ caption-side: bottom
+ border: 1px solid $border-color
+ .thead, .tbody
+ display: table-row-group
+ .tr
+ display: table-row
+ border-bottom: 1px solid $border-color
+ .td
+ display: table-cell
+ min-width: 120px
+ &:not(:first-child)
+ border-left: 1px solid $border-color
+ .thead
+ white-space: nowrap
+ .tbody
+ .tr
+ &:nth-child(even)
+ background: $table-striped-bg
+ &:hover
+ background: $table-hover-bg
diff --git a/app/views/admin/communication/blocks/templates/datatable/_edit.html.erb b/app/views/admin/communication/blocks/templates/datatable/_edit.html.erb
index 4ea5c0c1d..d1111ef09 100644
--- a/app/views/admin/communication/blocks/templates/datatable/_edit.html.erb
+++ b/app/views/admin/communication/blocks/templates/datatable/_edit.html.erb
@@ -1,8 +1,8 @@
<div class="table-responsive mb-5">
- <table class="table table-bordered table-hover">
- <thead>
- <tr>
- <td v-for="(column, index) in data.columns">
+ <div class="fake-table table">
+ <div class="thead">
+ <div class="tr">
+ <div class="td" v-for="(column, index) in data.columns">
<div class="d-flex">
<input type="text"
class="form-control"
@@ -12,8 +12,8 @@
<i class="fas fa-times"></i>
</a>
</div>
- </td>
- <td class="text-end">
+ </div>
+ <div class="td text-end">
<a class="btn btn-primary me-2"
v-on:click="data.columns.push('')">
<i class="fas fa-plus"></i> colonne
@@ -22,33 +22,31 @@
v-on:click="data.elements.push({cells: []})">
<i class="fas fa-plus"></i> ligne
</a>
- </td>
- </tr>
- </thead>
- <tbody>
- <draggable :list="data.elements" handle=".dragHandle">
- <tr v-for="(row, index) in data.elements">
- <td v-for="(column, columnIndex) in data.columns">
- <input type="text"
- class="form-control"
- v-model="row.cells[columnIndex]">
- </td>
- <td class="text-end">
- <div class="d-flex">
- <a class="btn btn-danger"
- v-on:click="data.elements.splice(index, 1)">
- <i class="fas fa-times"></i>
- </a>
+ </div>
+ </div>
+ </div>
+ <draggable :list="data.elements" handle=".dragHandle" class="tbody">
+ <div class="tr" v-for="(row, index) in data.elements">
+ <div class="td" v-for="(column, columnIndex) in data.columns">
+ <input type="text"
+ class="form-control"
+ v-model="row.cells[columnIndex]">
+ </div>
+ <div class="td" class="text-end">
+ <div class="d-flex">
+ <a class="btn btn-danger"
+ v-on:click="data.elements.splice(index, 1)">
+ <i class="fas fa-times"></i>
+ </a>
- <a class="btn ms-auto dragHandle">
- <i class="fa fa-bars handle"></i>
- </a>
- </div>
- </td>
- </tr>
- </draggable>
- </tbody>
- </table>
+ <a class="btn ms-auto dragHandle">
+ <i class="fa fa-bars handle"></i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </draggable>
+ </div>
</div>
<div class="row">
--
GitLab