reordenar articulos arrastrando y soltando

This commit is contained in:
f 2019-11-06 18:06:19 -03:00
parent c8bf7eba21
commit b0cffa9cfb
No known key found for this signature in database
GPG key ID: 2AE5A13E321F953D
9 changed files with 112 additions and 76 deletions

View file

@ -0,0 +1,3 @@
<!-- CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/
https://github.com/FortAwesome/Font-Awesome/blob/master/svgs/solid/arrows-alt-v.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path d="M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z"/></svg>

After

Width:  |  Height:  |  Size: 571 B

View file

@ -2,4 +2,5 @@
//= require turbolinks
//= require zepto/dist/zepto.min.js
//= require input-tag/input-tag.js
//= require table-dragger/dist/table-dragger
//= require_tree .

View file

@ -0,0 +1,16 @@
$(document).on('turbolinks:load', function() {
var table = document.querySelector('.table-draggable');
if (table == null) return;
tableDragger(table, {
mode: 'row',
onlyBody: true,
dragHandler: '.handle'
}).on('drop', function(from, to, el, mode) {
// TODO: Detenerse al llegar al elemento que se movió
$('.reorder').val(function(i,v) { return i; });
$('.submit-reorder').removeClass('d-none');
});
});

View file

@ -235,3 +235,9 @@ svg {
color: $white;
}
}
.handle {
img {
height: 1rem;
}
}

View file

@ -25,42 +25,49 @@
- if @posts.present?
.row
.col
%table.table.table-condensed
%tbody
- @posts.each do |post|
- next unless policy(post).show?
-#
saltearse el post a menos que esté en la categoría por
la que estamos filtrando
- if @category
- next unless post.attributes.include? :categories
- next unless post.categories.value.include?(@category)
%tr
%td
= link_to post.title.value,
site_post_path(@site, post.id)
- if post.attributes.include? :draft
- if post.draft.value
%span.badge.badge-primary
= post_label_t(:draft, post: post)
- if post.attributes.include? :categories
- unless post.categories.value.empty?
%br
%small
- post.categories.value.each do |c|
= link_to c, site_posts_path(@site, category: c)
= form_tag site_posts_reorder_path, method: :post do
= submit_tag t('posts.reorder'), class: 'btn submit-reorder d-none'
-# TODO: Permitir cambiar el idioma
%table.table.table-condensed.table-draggable
%tbody
- @posts.each_with_index do |post, i|
- next unless policy(post).show?
-#
saltearse el post a menos que esté en la categoría por
la que estamos filtrando
- if @category
- next unless post.attributes.include? :categories
- next unless post.categories.value.include?(@category)
%tr
%td
.handle
= image_tag 'arrows-alt-v.svg'
= hidden_field 'post[reorder]', '', value: i, class: 'reorder'
%td
= link_to post.title.value,
site_post_path(@site, post.id)
- if post.attributes.include? :draft
- if post.draft.value
%span.badge.badge-primary
= post_label_t(:draft, post: post)
- if post.attributes.include? :categories
- unless post.categories.value.empty?
%br
%small
- post.categories.value.each do |c|
= link_to c, site_posts_path(@site, category: c)
%td= post.date.value.strftime('%F')
%td
- if policy(post).edit?
= link_to t('posts.edit'),
edit_site_post_path(@site, post.id),
class: 'btn'
- if policy(post).destroy?
= link_to t('posts.destroy'),
site_post_path(@site, post.id),
class: 'btn',
method: :delete,
data: { confirm: t('posts.confirm_destroy') }
%td= post.date.value.strftime('%F')
%td
- if policy(post).edit?
= link_to t('posts.edit'),
edit_site_post_path(@site, post.id),
class: 'btn'
- if policy(post).destroy?
= link_to t('posts.destroy'),
site_post_path(@site, post.id),
class: 'btn',
method: :delete,
data: { confirm: t('posts.confirm_destroy') }
- else
%h2= t('posts.none')

View file

@ -347,7 +347,7 @@ en:
required:
label: ' (required)'
feedback: 'This field cannot be empty!'
reorder_posts: 'Reorder posts'
reorder: 'Reorder posts'
sort:
by: 'Sort by'
order: 'order'

View file

@ -357,7 +357,7 @@ es:
required:
label: ' (requerido)'
feedback: '¡Este campo no puede estar vacío!'
reorder_posts: 'Reordenar artículos'
reorder: 'Reordenar artículos'
sort:
by: 'Ordenar por'
order: 'posición'
@ -366,7 +366,7 @@ es:
content: 'Cuerpo del artículo'
categories: 'Todos'
dropdown: 'Desplegar el menú'
new: 'Empezar un artículo nuevo'
new: 'Crear artículo'
new_with_template: 'Comenzar %{template}'
index: 'Artículos'
edit: 'Editar'

View file

@ -6,7 +6,7 @@
"@rails/webpacker": "^4.0.7",
"commonmark": "^0.29.0",
"input-tag": "https://0xacab.org/sutty/input-tag.git",
"table-dragger": "^1.0.2",
"table-dragger": "https://0xacab.org/sutty/table-dragger.git",
"trix": "https://0xacab.org/sutty/trix.git",
"zepto": "^1.2.0"
},

View file

@ -579,6 +579,14 @@
"@babel/helper-regex" "^7.4.4"
regexpu-core "^4.5.4"
"@babel/polyfill@^7.4.0":
version "7.7.0"
resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.7.0.tgz#e1066e251e17606ec7908b05617f9b7f8180d8f3"
integrity sha512-/TS23MVvo34dFmf8mwCisCbWGrfhbiWZSwBo6HkADTBhUa2Q/jWltyY/tpofz/b6/RIhqaqQcquptCirqIhOaQ==
dependencies:
core-js "^2.6.5"
regenerator-runtime "^0.13.2"
"@babel/preset-env@^7.4.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.5.tgz#bc470b53acaa48df4b8db24a570d6da1fef53c9a"
@ -1199,13 +1207,6 @@ babel-plugin-macros@^2.5.0:
cosmiconfig "^5.2.0"
resolve "^1.10.0"
babel-runtime@^6.20.0:
version "6.26.0"
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@ -1882,9 +1883,15 @@ core-js-compat@^3.1.1:
browserslist "^4.6.6"
semver "^6.3.0"
core-js@^2.4.0:
version "2.5.5"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b"
core-js@^2.6.5:
version "2.6.10"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==
core-js@^3.0.1:
version "3.3.6"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.3.6.tgz#6ad1650323c441f45379e176ed175c0d021eac92"
integrity sha512-u4oM8SHwmDuh5mWZdDg9UwNVq5s1uqq6ZDLLIs07VY+VJU91i3h4f3K/pgFvtUQPGdeStrZ+odKyfyt4EnKHfA==
core-js@^3.1.3:
version "3.2.1"
@ -1962,12 +1969,6 @@ crossvent@1.5.4:
dependencies:
custom-event "1.0.0"
crossvent@^1.5.5:
version "1.5.5"
resolved "https://registry.yarnpkg.com/crossvent/-/crossvent-1.5.5.tgz#ad20878e4921e9be73d9d6976f8b2ecd0f71a0b1"
dependencies:
custom-event "^1.0.0"
crypto-browserify@^3.11.0:
version "3.12.0"
resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
@ -2179,10 +2180,6 @@ custom-event@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.0.tgz#2e4628be19dc4b214b5c02630c5971e811618062"
custom-event@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
cyclist@~0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
@ -2408,9 +2405,10 @@ dot-prop@^4.1.1:
dependencies:
is-obj "^1.0.0"
dragula-with-animation@^3.7.2:
dragula@^3.7.0:
version "3.7.2"
resolved "https://registry.yarnpkg.com/dragula-with-animation/-/dragula-with-animation-3.7.2.tgz#9b992db2a274324325c70bb0cb752e77e1faa8af"
resolved "https://registry.yarnpkg.com/dragula/-/dragula-3.7.2.tgz#4a35c9d3981ffac1a949c29ca7285058e87393ce"
integrity sha1-SjXJ05gf+sGpScKcpyhQWOhzk84=
dependencies:
contra "1.9.4"
crossvent "1.5.4"
@ -5696,6 +5694,11 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
ramda@^0.26.1:
version "0.26.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@ -5811,10 +5814,6 @@ regenerate@^1.4.0:
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
regenerator-runtime@^0.13.2:
version "0.13.3"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
@ -6013,9 +6012,12 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
rx@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
rxjs@^6.5.2:
version "6.5.3"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
integrity sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==
dependencies:
tslib "^1.9.0"
safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
@ -6622,14 +6624,15 @@ svgo@^1.0.0:
unquote "~1.1.1"
util.promisify "~1.0.0"
table-dragger@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/table-dragger/-/table-dragger-1.0.2.tgz#981f46c62fd2899b3fc5e644055ea72831949707"
"table-dragger@https://0xacab.org/sutty/table-dragger.git":
version "2.0.2"
resolved "https://0xacab.org/sutty/table-dragger.git#a5199975398dca9b3a849f5d56220fd11e68733c"
dependencies:
babel-runtime "^6.20.0"
crossvent "^1.5.5"
dragula-with-animation "^3.7.2"
rx "^4.1.0"
"@babel/polyfill" "^7.4.0"
core-js "^3.0.1"
dragula "^3.7.0"
ramda "^0.26.1"
rxjs "^6.5.2"
tapable@^1.0.0, tapable@^1.1.3:
version "1.1.3"