pg_rails 7.0.7 → 7.0.8.pre.alpha.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c615490752a2afcaa4959f18c3b58bc214849a0912c308aea4b75a48122aa859
-  data.tar.gz: d4e8cc1fc2418a2691ef25607776de7ab1b6936367379cb4571c12925836933c
+  metadata.gz: 54b808ee15e453ddfc9031c04c599eea58099615a03b4d23abadec9ee3951d8c
+  data.tar.gz: 552aabdd132314da31928c4fcb2b59969ad7afe21c7a239f45fbc7738a1356ca
 SHA512:
-  metadata.gz: 3c7cad41dc0953598c49c7a48ca188e24a62d8dea1d1aed95f530e5eb92faa18bbf1033aac19c8adf963f759e7d0de52e905b4001354afb282373a257f8042be
-  data.tar.gz: 8ecd2f4a9617b57b3938f307502883681d70dab249a6f0fbb0789855b411465dac411ffe7dc3056ee0b49a40f84db8a77ce71739bd7dbc9ad81691b42c4de591
+  metadata.gz: 5dddf3ab456741e7f671be016484caf643c1ad09a76ba96900707ab4e992049c5eb7da1273ab82b3fd83975278b72797cf4f9c0a178da5097f6343103e7968e7
+  data.tar.gz: 87c679f069138a579790599626636fcf31c44ea9a1393bd13314cb2c5268c6add6c46dc89eabcb742739a2d19179d0cf475860bdf108cd981e743183f0ae1a30

data/README.md

@@ -86,3 +86,6 @@ be rails pg_engine_engine:install:migrations
     "build:css:prefix": "postcss ./pg_rails/builds/application.css --use=autoprefixer --output=./pg_rails/builds/application.css",
     "build:css": "yarn build:css:compile && yarn build:css:prefix",
 
+
+ruby-vips
+pdftoppm

data/pg_associable/app/assets/{css → stylesheets}/pg_associable.scss

@@ -1,44 +1,47 @@
 @use 'sass:color';
 
-[data-state=select-item] .show-on-new-item {
-  display: none;
-}
-[data-state=new-item] .show-on-select-item {
-  display: none;
-}
 .pg-form {
-  .pg_associable_inline, .pg_associable {
+  .pg_associable {
     .limpiar {
       display: none;
       position: absolute;
-      top: 8px;
-      right: 10px;
+      right: 0.6em;
+      top: 0;
+      bottom: 0;
+
       i {
+        align-self: center;
         color: #6f7071;
       }
     }
     .pencil {
+      display: flex;
       position: absolute;
-      top: 6px;
-      right: 9px;
+      right: 0.6em;
+      top: 0;
+      bottom: 0;
       color: #6f7071;
       cursor: pointer;
     }
+    .pencil::before {
+      align-self: center;
+    }
     &.focus .pencil {
       display: none;
     }
     input[type=text] {
       background-color: white;
+      padding-right: 2em;
     }
     &.filled {
       .pencil {
         display: none;
       }
       .limpiar {
-        display: inline-block;
+        display: flex;
       }
-      input, input:focus {
-        background-color: color.adjust(#a7b7bb, $saturation: +10%, $lightness: +20%);
+      .resultados-wrapper {
+        display:none!important;
       }
     }
     .resultados-wrapper {
@@ -46,11 +49,6 @@
       position: relative;
     }
     &:focus-within {
-      .search-box {
-        // outline: 1px solid color.adjust(#a7b7bb, $saturation: +30%);
-        // border-radius: 3px;
-      }
-
       &:has(.resultados) {
         input[type=text] {
           border-bottom-left-radius: 0!important;
@@ -64,36 +62,37 @@
         display: block;
       }
     }
-    .resultados {
-      position: absolute;
-      // top: 30px;
-      background-color: white;
-      border: 1px solid #a7b7bb;
-      border-top: none;
-      border-radius: 4px;
-      padding: 5px 11px;
-      width: 100%;
-
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-}
-.modal-asociable {
-  .buscar input[type=text] {
-    max-width: 180px;
-  }
-  .resultados {
-    margin-top: 16px;
-    border: 1px solid #c8c8c8;
   }
 }
+// .modal-asociable {
+//   .buscar input[type=text] {
+//     max-width: 180px;
+//   }
+//   .resultados {
+//     margin-top: 16px;
+//     border: 1px solid #c8c8c8;
+//   }
+// }
 .resultados {
   .list-group-item:hover {
     background-color: color.adjust(#a7b7bb, $saturation: +10%, $lightness: +20%);
   }
 }
+.sub-wrapper {
+  overflow: auto;
+  box-shadow: 0px 9px 13px -3px rgba(0, 0, 0, 0.5);
+  // position: absolute;
+  // z-index: 1;
+  background-color: white;
+  border: 1px solid #a7b7bb;
+  border-top: none;
+  border-radius: 4px;
+  padding: 5px 11px;
+  width: 100%;
 
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
 .modal-asociable .modal-footer {
   justify-content: space-between;
 }

data/pg_associable/app/helpers/pg_associable/form_builder_methods.rb

@@ -1,3 +1,4 @@
+# TODO: mover a form_builder
 module PgAssociable
   module FormBuilderMethods
     def self.included(mod)
@@ -5,19 +6,45 @@ module PgAssociable
       mod.include PgEngine::RouteHelper
     end
 
+    MAXIMO_PARA_SELECT = 10
+    # TODO: si está entre 10 y 50, habilitar un buscador por js
+
     def pg_associable(atributo, options = {})
-      url_modal = namespaced_path(clase_asociacion(atributo), prefix: :abrir_modal)
-      options[:as] = 'pg_associable/pg_associable'
-      options[:wrapper] = :pg_associable
-      options[:url_modal] = url_modal
+      return input(atributo, options) if options[:disabled]
+
+      collection, puede_crear = collection_pc(atributo, options)
+      options.deep_merge!({ wrapper_html: { 'data-puede-crear': 'true' } }) if puede_crear
+
+      if !puede_crear && collection.count <= MAXIMO_PARA_SELECT
+        select_comun(atributo, options, collection)
+      else
+        select_pro(atributo, options, collection)
+      end
+    end
+
+    def collection_pc(atributo, _options)
+      klass = clase_asociacion(atributo)
+      user = template.controller.current_user
+      in_modal = options[:asociable].present?
+      puede_crear = !in_modal && Pundit::PolicyFinder.new(klass).policy.new(user, klass).new?
+      collection = Pundit::PolicyFinder.new(klass).scope.new(user, klass).resolve
+      [collection, puede_crear]
+    end
+
+    def select_pro(atributo, options, collection)
+      if (preload = options.delete(:preload))
+        collection = preload.is_a?(Integer) ? collection.limit(preload) : preload
+        options.deep_merge!({ wrapper_html: { 'data-preload': collection.decorate.to_json } })
+      end
+      # TODO: usar una clase más precisa para el modal?
+      options.deep_merge!({ wrapper_html: { data: { controller: 'asociable',
+                                                    'asociable-modal-outlet': '.modal' } } })
+      options[:as] = 'pg_associable'
       association atributo, options
     end
 
-    def pg_associable_inline(atributo, options = {})
-      url_search = namespaced_path(clase_asociacion(atributo), prefix: :buscar)
-      options[:as] = 'pg_associable/pg_associable_inline'
-      options[:wrapper] = :pg_associable_inline
-      options[:url_search] = url_search
+    def select_comun(atributo, options, collection)
+      options[:collection] = collection
       association atributo, options
     end
 

data/pg_associable/app/helpers/pg_associable/helpers.rb

@@ -1,5 +1,7 @@
 module PgAssociable
   module Helpers
+    MAX_RESULTS = 8
+
     def pg_respond_abrir_modal
       respond_to do |format|
         format.turbo_stream do
@@ -9,10 +11,11 @@ module PgAssociable
     end
 
     def pg_respond_buscar
-      partial = params[:partial] || 'pg_associable/resultados'
-      @collection = policy_scope(@clase_modelo).kept.query(params[:query]).limit(6)
+      partial = 'pg_associable/resultados_inline'
+      resultados_prefix = 'resultados-inline'
+      @collection = policy_scope(@clase_modelo).kept.query(params[:query]).limit(MAX_RESULTS)
       render turbo_stream:
-        turbo_stream.update("resultados-#{params[:id]}",
+        turbo_stream.update("#{resultados_prefix}-#{params[:id]}",
                             partial:, locals: { collection: @collection })
     end
   end

data/pg_associable/app/inputs/pg_associable_input.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class PgAssociableInput < SimpleForm::Inputs::StringInput
+  include ActionView::Helpers::FormTagHelper
+  include Rails.application.routes.url_helpers
+  include PgEngine::RouteHelper
+
+  def hidden_input(_wrapper_options = {})
+    @builder.hidden_field(attribute_name)
+  end
+
+  def controller
+    # Para que no rompa polymorphic_url en NamespaceDeductor
+  end
+
+  def input(wrapper_options = nil)
+    atributo = attribute_name.to_s.gsub('_id', '')
+    url_modal = namespaced_path(clase_asociacion(atributo), prefix: :abrir_modal)
+    url_search = namespaced_path(clase_asociacion(atributo), prefix: :buscar)
+
+    input_html_options[:data] = { url_search:, url_modal: }
+    input_html_options[:type] = 'text'
+
+    merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)
+
+    build_input(merged_input_options)
+  end
+
+  def clase_asociacion(atributo)
+    asociacion = object.class.reflect_on_all_associations.find { |a| a.name == atributo.to_sym }
+    nombre_clase = asociacion.options[:class_name]
+    nombre_clase = asociacion.name.to_s.camelize if nombre_clase.nil?
+    Object.const_get(nombre_clase)
+  end
+
+  def build_input(input_options)
+    content_tag('div', class: 'position-relative') do
+      hidden_input + text_field_tag(nil, object.send(reflection.name).to_s,
+                                    input_options) + limpiar + pencil
+    end
+  end
+
+  def limpiar(_wrapper_options = nil)
+    content_tag('a', href: 'javascript:void(0)', class: 'limpiar', title: 'Limpiar', tabindex: '0',
+                     data: { action: 'asociable#selectItem' }) do
+      '<i class="bi bi-x-lg"></i>'.html_safe
+    end
+  end
+
+  def pencil(_wrapper_options = nil)
+    '<i tabindex="-1" class="bi bi-pencil pencil"></i>'.html_safe
+  end
+end

data/pg_associable/app/javascript/asociable_controller.tsx

@@ -0,0 +1,247 @@
+import { Controller } from '@hotwired/stimulus'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+export default class extends Controller {
+  static outlets = ['modal']
+
+  lastValue = null
+  subWrapper = null
+  elemId = null
+  input = null
+
+  connect () {
+    // ID único para identificar el campo y el modal
+    this.elemId = Math.trunc(Math.random() * 1000000000)
+
+    this.input = this.element.querySelector('input[type=text]')
+
+    this.element.setAttribute('data-asociable-modal-outlet', `.modal-${this.elemId}`)
+    this.element.classList.add(`asociable-${this.elemId}`)
+
+    const result = document.createElement('div')
+    result.classList.add('resultados-wrapper')
+    this.subWrapper = document.createElement('div')
+    this.subWrapper.setAttribute('id', `resultados-inline-${this.elemId}`)
+    this.subWrapper.classList.add('sub-wrapper')
+    this.subWrapper.classList.add('position-absolute')
+    this.subWrapper.classList.add('z-1')
+    result.appendChild(this.subWrapper)
+    this.input.parentNode.appendChild(result)
+
+    this.resetResultados()
+
+    const input = this.element.querySelector('input[type=text]')
+    if (input.value) {
+      this.element.classList.add('filled')
+      input.setAttribute('readonly', 'true')
+    }
+    this.element.querySelector('.pencil').onclick = () => {
+      input.focus()
+    }
+
+    const debounce = function (callback, wait) {
+      let timerId
+      return (...args) => {
+        clearTimeout(timerId)
+        timerId = setTimeout(() => {
+          callback(...args)
+        }, wait)
+      }
+    }
+    const doSearchBounce = debounce((force) => {
+      this.doSearch(force)
+    }, 200)
+
+    this.input.addEventListener('blur', () => {
+      this.input.placeholder = ''
+    })
+    this.input.onfocus = () => {
+      this.input.select()
+      if (this.input.value.length === 0) {
+        this.escribiAlgo()
+      }
+
+      if (!this.element.closest('.modal')) {
+        const wHeight = window.visualViewport.height
+        const scrollTop = document.scrollingElement.scrollTop
+        const viewPortBottom = scrollTop + wHeight
+        const swHeight = parseInt(this.subWrapper.style.maxHeight) + 20
+        const elementTop = this.element.getBoundingClientRect().top + scrollTop
+        const inputBottom = this.input.getBoundingClientRect().bottom + scrollTop
+        const swBottom = inputBottom + swHeight
+
+        if (swBottom > viewPortBottom) {
+          document.scrollingElement.scroll({ top: elementTop })
+        }
+      }
+    }
+    this.input.onkeyup = (e) => {
+      if (this.input.value.length === 0) {
+        this.escribiAlgo()
+      }
+      if (e.keyCode === 13) {
+        doSearchBounce(true)
+      } else {
+        doSearchBounce()
+      }
+    }
+    this.input.onkeydown = (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault()
+        return false
+      }
+    }
+    this.setMaxHeight()
+  }
+
+  resetResultados () {
+    const rows = []
+    if (this.element.dataset.puedeCrear) {
+      rows.push(
+        <a key="new" href="javascript:void(0)"
+           className="list-group-item"
+           data-action="asociable#crearItem"
+        >
+          Nuevo
+        </a>
+      )
+    }
+    if (this.element.dataset.preload) {
+      JSON.parse(this.element.dataset.preload).forEach((object) => {
+        rows.push(
+          <a key={object.id} href="javascript:void(0)"
+             className="list-group-item"
+             data-action="asociable#selectItem"
+             data-id={object.id}
+             data-object={JSON.stringify(object)}
+          >
+            {object.to_s}
+          </a>
+        )
+      })
+    }
+    this.subWrapper.innerHTML = renderToStaticMarkup(
+      <div className="resultados" tabIndex={-1}>
+        <ul className="list-group list-group-flush">
+          {rows}
+        </ul>
+      </div>
+    )
+  }
+
+  setMaxHeight () {
+    let maxHeight
+    if (!this.element.closest('.modal')) {
+      const scrollTop = document.scrollingElement.scrollTop
+      const inputY = this.input.getBoundingClientRect().bottom + scrollTop
+      const bodyHeight = document.body.getBoundingClientRect().height
+      maxHeight = bodyHeight - inputY
+      if (maxHeight < 200) {
+        maxHeight = 200
+      }
+      if (bodyHeight < inputY + maxHeight) {
+        document.body.style.height = `${inputY + maxHeight}px`
+      }
+    } else {
+      maxHeight = 200
+    }
+    this.subWrapper.style.maxHeight = `${maxHeight - 20}px`
+  }
+
+  crearItem () {
+    // Si ya hay un modal abierto lo abro y retorno
+    if (this.modalOutlets.length > 0) {
+      this.modalOutlet.openModal()
+      return
+    }
+
+    const elem = (
+      <form method="get" action={this.input.dataset.urlModal} data-turbo-stream="true">
+        <input type="hidden" name="id" value={this.elemId} />
+      </form>
+    )
+    const form = document.createElement('div')
+    form.innerHTML = renderToStaticMarkup(elem)
+    document.body.prepend(form)
+    form.childNodes[0].requestSubmit()
+    form.remove()
+  }
+
+  escribiAlgo () {
+    this.input.placeholder = 'Escribí algo para buscar'
+  }
+
+  buscando () {
+    this.subWrapper.innerHTML = renderToStaticMarkup(
+      <div className="resultados" tabIndex={-1}>
+        <div className="fst-italic text-secondary">Buscando...</div>
+      </div>
+    )
+  }
+
+  selectItem (e) {
+    if (e.target.dataset.object) {
+      this.completarCampo(JSON.parse(e.target.dataset.object))
+    } else {
+      this.completarCampo(null)
+    }
+  }
+
+  doSearch (force = false) {
+    if (this.element.classList.contains('filled')) {
+      return
+    }
+    if (!force && this.input.value.length < 3) {
+      this.resetResultados()
+      return
+    }
+    if (!force && this.input.value === this.lastValue) {
+      return
+    }
+    this.lastValue = this.input.value
+
+    const timerId = setTimeout(() => {
+      this.buscando()
+    }, 200)
+    document.addEventListener('turbo:before-stream-render', function () {
+      clearTimeout(timerId)
+      // TODO: testear
+    }, { once: true })
+    const elem = (
+      <form method="post" action={this.input.dataset.urlSearch} data-turbo-stream="true">
+        <input type="hidden" name="id" value={this.elemId} />
+        <input type="hidden" name="query" value={this.input.value} />
+        <input type="hidden" name="puede_crear" value={this.element.dataset.puedeCrear} />
+      </form>
+    )
+    const form = document.createElement('div')
+    form.innerHTML = renderToStaticMarkup(elem)
+    document.body.prepend(form)
+    form.childNodes[0].requestSubmit()
+    form.remove()
+  }
+
+  completarCampo (object) {
+    const textField = this.element.querySelector('input[type=text]')
+    const hiddenField = this.element.querySelector('input[type=hidden]')
+    if (object) {
+      hiddenField.value = object.id
+      textField.value = object.to_s
+      textField.setAttribute('readonly', 'true')
+      this.element.classList.add('filled')
+      this.element.dataset.object = object
+      const event = new CustomEvent('pg_associable:changed', { detail: object })
+      this.element.dispatchEvent(event)
+    } else {
+      hiddenField.value = null
+      textField.value = null
+      textField.removeAttribute('readonly')
+      this.element.classList.remove('filled')
+      this.element.dataset.object = null
+      const event = new CustomEvent('pg_associable:changed')
+      this.element.dispatchEvent(event)
+    }
+    this.resetResultados()
+  }
+}

data/pg_associable/app/javascript/modal_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from '@hotwired/stimulus'
+import * as bootstrap from 'bootstrap'
+
+export default class extends Controller {
+  static outlets = ['asociable']
+  static targets = ['response']
+
+  modalPuntero = null
+
+  connect (e) {
+    this.modalPuntero = new bootstrap.Modal(this.element)
+    this.modalPuntero.show()
+  }
+
+  responseTargetConnected (e) {
+    const newObject = JSON.parse(e.dataset.response)
+    this.asociableOutlet.completarCampo(newObject)
+    this.element.remove()
+  }
+
+  openModal () {
+    this.modalPuntero.show()
+  }
+
+  disconnect (e) {
+    this.modalPuntero.dispose()
+    document.querySelectorAll('.modal-backdrop').forEach(e => { e.remove() })
+  }
+}

data/pg_associable/app/views/pg_associable/_resultados_inline.html.slim

@@ -1,12 +1,13 @@
-.resultados tabindex="-1"
-  - if collection.any?
-    .list-group.list-group-flush
-      = link_to 'Ninguno', 'javascript:void(0)',
-                class: 'list-group-item', data: { action: 'asociable_inline#selectItem' }
+.resultados.inline tabindex="-1"
+  ul.list-group.list-group-flush
+    - if params[:puede_crear].present?
+      = link_to 'Nuevo', 'javascript:void(0)',
+                class: 'list-group-item', data: { action: 'asociable#crearItem' }
+    - if collection.any?
       - collection.each do |object|
         = link_to object.to_s, 'javascript:void(0)',
                   class: 'list-group-item',
-                  data: { action: 'asociable_inline#selectItem', id: object.id }
-  - else
-    ul.list-group.list-group-flush
+                  data: { action: 'asociable#selectItem',
+                          id: object.id, object: object.decorate.to_json }
+    - else
       li.list-group-item No hay resultados para "#{params[:query]}"

data/pg_associable/app/views/pg_engine/base/_pg_associable_modal.html.slim

@@ -2,40 +2,13 @@
                        tabindex="-1" data-controller="modal"
                        data-modal-asociable-outlet=".asociable-#{params[:id]}"]
   .modal-dialog
-    .modal-content.pg_associable data-state="select-item"
+    / TODO: pg_associable no va
+    .modal-content.pg_associable
       .modal-header
-        .modal-title.show-on-new-item
+        .modal-title
+          / TODO: género "Nuevo/a"
           h3 Nuevo #{@clase_modelo.nombre_singular.downcase}
-        .modal-title.show-on-select-item
-          h3 Buscar #{@clase_modelo.nombre_singular.downcase}
         a.btn-close[type="button" data-bs-dismiss="modal" aria-label="Close"]
       .modal-body
-        .show-on-select-item
-          - if policy_scope(@clase_modelo).kept.count.zero?
-            p No hay #{@clase_modelo.nombre_plural.downcase} aún
-            = link_to "Crear el primer #{@clase_modelo.nombre_singular.downcase}",
-                      'javascript:void(0)', data: { action: 'modal#toggleCrearElegir' }
-          - else
-            = form_tag namespaced_path(@clase_modelo, prefix: :buscar),
-                       data: { 'modal-target': 'searchForm' },
-                       method: :post, class: 'pg-form buscar' do
-              = hidden_field_tag :id, params[:id]
-              = text_field_tag :query, '', class: 'form-control',
-                                           placeholder: 'Escribí algo para buscar',
-                                           autocomplete: 'off',
-                                           data: { 'modal-target': 'searchInput' }
-              / = button_tag 'Buscar'
-            .resultados-wrapper id="resultados-#{params[:id]}" data-modal-target="result"
-        #pg-associable-form.show-on-new-item
+        .pg-associable-form
           = render partial: 'form', locals: { object: @clase_modelo.new, asociable: true }
-
-      .modal-footer
-        = link_to "Buscar #{@clase_modelo.nombre_singular.downcase} existente",
-                  'javascript:void(0)', class: 'btn btn-primary show-on-new-item',
-                  data: { action: 'modal#toggleCrearElegir' }
-        = link_to "Nuevo #{@clase_modelo.nombre_singular.downcase}",
-                  'javascript:void(0)', class: 'btn btn-primary show-on-select-item',
-                   data: { action: 'modal#toggleCrearElegir' }
-        = link_to "Sin #{@clase_modelo.nombre_singular.downcase}",
-                  'javascript:void(0)', class: 'btn btn-secondary',
-                   data: { action: 'modal#selectItem' }

data/pg_associable/index.js

@@ -1,7 +1,5 @@
-import AsociableInlineController from './app/assets/js/asociable_inline_controller'
-import AsociableController from './app/assets/js/asociable_controller'
-import ModalController from './app/assets/js/modal_controller'
+import AsociableController from './app/javascript/asociable_controller'
+import ModalController from './app/javascript/modal_controller'
 
-window.Stimulus.register('asociable_inline', AsociableInlineController)
 window.Stimulus.register('asociable', AsociableController)
 window.Stimulus.register('modal', ModalController)

data/pg_associable/lib/pg_associable/engine.rb

@@ -1,8 +1,4 @@
 module PgAssociable
   class Engine < ::Rails::Engine
-    # initializer 'configurar_simple_form', after: 'factory_bot.set_fixture_replacement' do
-    initializer 'configurar_pg_scaffold' do
-      require 'pg_associable/simple_form_initializer'
-    end
   end
 end