From b0cffa9cfb4d7954d644d42479fa3728a2d61763 Mon Sep 17 00:00:00 2001 From: f Date: Wed, 6 Nov 2019 18:06:19 -0300 Subject: [PATCH] reordenar articulos arrastrando y soltando --- app/assets/images/arrows-alt-v.svg | 3 + app/assets/javascripts/application.js | 1 + app/assets/javascripts/order.js | 16 +++++ app/assets/stylesheets/application.scss | 6 ++ app/views/posts/index.haml | 79 ++++++++++++++----------- config/locales/en.yml | 2 +- config/locales/es.yml | 4 +- package.json | 2 +- yarn.lock | 75 ++++++++++++----------- 9 files changed, 112 insertions(+), 76 deletions(-) create mode 100644 app/assets/images/arrows-alt-v.svg create mode 100644 app/assets/javascripts/order.js diff --git a/app/assets/images/arrows-alt-v.svg b/app/assets/images/arrows-alt-v.svg new file mode 100644 index 0000000..2b67bd5 --- /dev/null +++ b/app/assets/images/arrows-alt-v.svg @@ -0,0 +1,3 @@ + + diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 19d1215..fc9a926 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -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 . diff --git a/app/assets/javascripts/order.js b/app/assets/javascripts/order.js new file mode 100644 index 0000000..3c72a5f --- /dev/null +++ b/app/assets/javascripts/order.js @@ -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'); + }); +}); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 53501e6..63eb089 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -235,3 +235,9 @@ svg { color: $white; } } + +.handle { + img { + height: 1rem; + } +} diff --git a/app/views/posts/index.haml b/app/views/posts/index.haml index 83de4e6..8aa1173 100644 --- a/app/views/posts/index.haml +++ b/app/views/posts/index.haml @@ -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') diff --git a/config/locales/en.yml b/config/locales/en.yml index 238dbc6..466c432 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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' diff --git a/config/locales/es.yml b/config/locales/es.yml index 4eda8ba..4c104fc 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -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' diff --git a/package.json b/package.json index 0e7986b..92eff9b 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/yarn.lock b/yarn.lock index 7b39840..c5afe24 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"