pg_rails 7.0.8.pre.alpha → 7.0.8.pre.alpha.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a6d74fa06142003ba7e436907908f3f7ca491e8ab6367796424de5af92d19217
-  data.tar.gz: a8a7545e0881a3fb79d3d2185314619341286488d7b1eeacb265c0adacb1b371
+  metadata.gz: 54b808ee15e453ddfc9031c04c599eea58099615a03b4d23abadec9ee3951d8c
+  data.tar.gz: 552aabdd132314da31928c4fcb2b59969ad7afe21c7a239f45fbc7738a1356ca
 SHA512:
-  metadata.gz: 3f27603a1c050b0c5aada27652696a5b5cff62041d51b31ad99e4b09494a5b5f6b3f2376ce56bf725ae7bc7a3effcbb10d2851e5c9df7530902dec5a2d885f09
-  data.tar.gz: ce9641619c78d375984b774fd007c7054e8ac6fe605d0f2c95c0f71bddfe498b081f64589c8a566a4da48d82f60b332d20f1359c937aa8cb34c137fa7a497014
+  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/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 {
     .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,10 +6,53 @@ 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 = {})
+      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'
-      options[:wrapper_html] = { data: { controller: 'asociable', 'asociable-modal-outlet': '.modal' } }
       association atributo, options
     end
+
+    def select_comun(atributo, options, collection)
+      options[:collection] = collection
+      association atributo, 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
   end
 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,11 +11,11 @@ module PgAssociable
     end
 
     def pg_respond_buscar
-      partial = params[:partial] || 'pg_associable/resultados'
-      resultados = params[:resultados] || '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/javascript/asociable_controller.tsx

@@ -6,13 +6,11 @@ export default class extends Controller {
   static outlets = ['modal']
 
   lastValue = null
-  result = null
+  subWrapper = null
   elemId = null
   input = null
 
   connect () {
-    console.log('connect asociable')
-
     // ID único para identificar el campo y el modal
     this.elemId = Math.trunc(Math.random() * 1000000000)
 
@@ -21,14 +19,22 @@ export default class extends Controller {
     this.element.setAttribute('data-asociable-modal-outlet', `.modal-${this.elemId}`)
     this.element.classList.add(`asociable-${this.elemId}`)
 
-    this.result = document.createElement('div')
-    this.result.setAttribute('id', `resultados-inline-${this.elemId}`)
-    this.result.classList.add('resultados-wrapper')
-    this.input.parentNode.appendChild(this.result)
+    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()
@@ -55,6 +61,20 @@ export default class extends Controller {
       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) {
@@ -72,6 +92,61 @@ export default class extends Controller {
         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 () {
@@ -82,7 +157,7 @@ export default class extends Controller {
     }
 
     const elem = (
-      <form method="get" action={this.input.dataset.url_modal} data-turbo-stream="true">
+      <form method="get" action={this.input.dataset.urlModal} data-turbo-stream="true">
         <input type="hidden" name="id" value={this.elemId} />
       </form>
     )
@@ -98,7 +173,7 @@ export default class extends Controller {
   }
 
   buscando () {
-    this.result.innerHTML = renderToStaticMarkup(
+    this.subWrapper.innerHTML = renderToStaticMarkup(
       <div className="resultados" tabIndex={-1}>
         <div className="fst-italic text-secondary">Buscando...</div>
       </div>
@@ -111,11 +186,14 @@ export default class extends Controller {
     } else {
       this.completarCampo(null)
     }
-    this.result.innerHTML = ''
   }
 
   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) {
@@ -128,13 +206,13 @@ export default class extends Controller {
     }, 200)
     document.addEventListener('turbo:before-stream-render', function () {
       clearTimeout(timerId)
-    })
+      // TODO: testear
+    }, { once: true })
     const elem = (
-      <form method="post" action={this.input.dataset.url_search} data-turbo-stream="true">
+      <form method="post" action={this.input.dataset.urlSearch} data-turbo-stream="true">
         <input type="hidden" name="id" value={this.elemId} />
-        <input type="hidden" name="partial" value="pg_associable/resultados_inline" />
-        <input type="hidden" name="resultados" value="resultados-inline" />
         <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')
@@ -150,22 +228,20 @@ export default class extends Controller {
     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 {
-      textField.value = null
       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.result.innerHTML = ''
-  }
-
-  disconnect () {
-    console.log('disconnect asociable')
+    this.resetResultados()
   }
 }

data/pg_associable/app/javascript/modal_controller.js

@@ -3,118 +3,27 @@ import * as bootstrap from 'bootstrap'
 
 export default class extends Controller {
   static outlets = ['asociable']
-  static targets = ['response', 'result', 'searchInput', 'searchForm']
+  static targets = ['response']
 
   modalPuntero = null
-  lastValue = ''
 
   connect (e) {
-    console.log('ModalController connected')
-    const modal = this.targets.element
-    this.modalPuntero = new bootstrap.Modal(modal)
+    this.modalPuntero = new bootstrap.Modal(this.element)
     this.modalPuntero.show()
-
-    if (this.searchInputTargets.length > 0) {
-      this.bindSearchInput()
-    }
-  }
-
-  debounce (callback, wait) {
-    let timerId
-    return (...args) => {
-      clearTimeout(timerId)
-      timerId = setTimeout(() => {
-        callback(...args)
-      }, wait)
-    }
-  }
-
-  bindSearchInput () {
-    const doSearchBounce = this.debounce((force) => {
-      this.doSearch(force)
-    }, 200)
-    this.searchInputTarget.onkeydown = (e) => {
-      if (e.keyCode === 13) {
-        e.preventDefault()
-        return false
-      }
-    }
-    this.searchInputTarget.onkeyup = (e) => {
-      if (e.keyCode === 13) {
-        doSearchBounce(true)
-      } else {
-        doSearchBounce()
-      }
-    }
-  }
-
-  buscando () {
-    this.resultTarget.innerHTML = `
-<ul class="resultados list-group list-group-flush" tabindex="-1">
-  <li class="list-group-item">
-    <span class="fst-italic text-secondary">Buscando...</span>
-  </li>
-</ul>
-`
-  }
-
-  doSearch (force = false) {
-    if (!force && this.searchInputTarget.value.length < 3) {
-      return
-    }
-    if (!force && this.searchInputTarget.value === this.lastValue) {
-      return
-    }
-    this.lastValue = this.searchInputTarget.value
-
-    const timerId = setTimeout(() => {
-      this.buscando()
-    }, 200)
-    document.addEventListener('turbo:before-stream-render', function (e) {
-      clearTimeout(timerId)
-    })
-    this.searchFormTarget.requestSubmit()
-  }
-
-  selectItem (e) {
-    const asociable = this.asociableOutlet
-    if (e.target.dataset.object) {
-      asociable.completarCampo(JSON.parse(e.target.dataset.object))
-    } else {
-      asociable.completarCampo(null)
-    }
-    this.remove()
   }
 
   responseTargetConnected (e) {
     const newObject = JSON.parse(e.dataset.response)
-    const asociable = this.asociableOutlet
-    asociable.completarCampo(newObject)
-    this.remove()
-  }
-
-  remove () {
-    this.targets.element.remove()
+    this.asociableOutlet.completarCampo(newObject)
+    this.element.remove()
   }
 
   openModal () {
     this.modalPuntero.show()
   }
 
-  toggleCrearElegir (e) {
-    const content = this.element.querySelector('.modal-content')
-    const state = content.dataset.state
-    const newValue = state === 'new-item' ? 'select-item' : 'new-item'
-    content.setAttribute('data-state', newValue)
-  }
-
   disconnect (e) {
-    console.log('ModalController disconnected')
     this.modalPuntero.dispose()
     document.querySelectorAll('.modal-backdrop').forEach(e => { e.remove() })
   }
-
-  buscar () {
-    alert('buscar')
-  }
 }

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

@@ -1,15 +1,13 @@
-.resultados tabindex="-1"
-  - if collection.any?
-    .list-group.list-group-flush
-      = link_to 'Crear', 'javascript:void(0)',
+.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' }
-      = link_to 'Ninguno', 'javascript:void(0)',
-                class: 'list-group-item', data: { action: 'asociable#selectItem' }
+    - if collection.any?
       - collection.each do |object|
         = link_to object.to_s, 'javascript:void(0)',
                   class: 'list-group-item',
                   data: { action: 'asociable#selectItem',
                           id: object.id, object: object.decorate.to_json }
-  - else
-    ul.list-group.list-group-flush
+    - 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' }