satis 2.1.49 → 2.1.50

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ad2f7b4c5a019c16cbd6d7a87a119d3db6db6582b514f3d79bc1bb9c6b217ac
-  data.tar.gz: 7cc90112489b1b41672e7d3319de43a9c8525b9d1a5c1c7a3255d3eafda2f97c
+  metadata.gz: e8a393c04d2d3c296a40cbeff2d67c11d77035cacafd6861641422595a051ef1
+  data.tar.gz: eb3403bba306eb4e4953b31abda212636e0dc0f304917fc0ab1c6c533db50d98
 SHA512:
-  metadata.gz: bbaf6180578a757ee3878c711055b51f91af0083fade4eece870e8ab4f8b14a289f91718572e260a8a1b01fb14bc1e2ec4b8d3e745e248d3c36f35196994e70b
-  data.tar.gz: 472ebef37cbb6d5beceffd4ab8aaedbaf40aa3d1192d61c347a3ed4d5c1231e169d0f39d5d3e5c534d2860f0885c17cc3d9044f1d3e672078e63e821d04155a6
+  metadata.gz: 69d33e8297502ab3dbe754f7cbca3d886c7cacd529d1356fda0acd6725bd77fe883db23e2cd5c51b2b4cc4deaf7d8ded771e086ddd60f5bdebca6fb5e2932369
+  data.tar.gz: d94edace53c39bb158ff07d39728901fdb849b14e2472c5a4983405ec4ad3d8501670d3a1798902e8056c7c37e46f228e0b26453579d8c626b1ec7e9dcf38767

data/app/components/satis/attachments/component.css

@@ -1,5 +1,5 @@
 .attachments__group {
-  @apply grid gap-6 mt-10 justify-start;
+  @apply grid gap-6 mt-0 justify-start;
   grid-template-columns: repeat(auto-fill, 200px);
 }
 
@@ -13,8 +13,7 @@
 }
 
 .attachments__attachment .attachments__button {
-  @apply hidden absolute top-2.5 bg-white bg-opacity-80 p-1.5 rounded-full;
-  @apply dark:bg-gray-700 dark:text-white;
+  @apply hidden;
 }
 
 .attachments__attachment .attachments__button:first-of-type {
@@ -26,7 +25,7 @@
 }
 
 .attachments__attachment:hover .attachments__button {
-  @apply block w-8 h-8 text-center;
+  @apply block w-7 h-7 justify-center items-center text-center bg-gray-100 dark:bg-gray-800 dark:text-white;
 }
 
 .attachments__attachment .attachments__filename {
@@ -85,8 +84,7 @@
 }
 
 .upload-btn:hover {
-  @apply dark:bg-gray-900 dark:text-white dark:border-gray-700 bg-white;
-  border-color: #999;
+  @apply dark:bg-gray-900 dark:text-white dark:border-gray-700 border-gray-500 bg-white;
 }
 
 .upload-btn:focus {
@@ -126,8 +124,14 @@
 }
 
 .uploading .upload-btn {
-  @apply dark:bg-gray-800 dark:border-gray-600 dark:text-white;
-  background-color: #fcf8e3;
+  @apply dark:bg-gray-800 dark:border-gray-600 dark:text-white bg-white;
   border-color: #f39c12;
   cursor: not-allowed;
 }
+
+.attachments__group .attachment-upload.upload-btn.attachments__attachment {
+  @apply bg-white dark:bg-gray-800 border-2 border-dashed hover:border-gray-500 border-gray-300 p-4 flex flex-col justify-center items-center text-center w-full min-h-[150px] box-border;
+}
+.attachments__group .attachment-upload.upload-btn.attachments__attachment.dark {
+  @apply hover:border-white;
+}

data/app/components/satis/attachments/component.html.slim

@@ -1,25 +1,8 @@
-div.attachment-upload.upload-btn data-controller="attachment-upload" data-attachment-upload-url="#{Satis::Engine.routes.url_helpers.attachments_path(sgid: model_sgid, attribute: attribute)}" data-attachment-upload-param-name="attachments[]"data-attachment-upload-extra-data='{}' data-turbo="true" turbo-method="post"
-  span.icon.upload
-    i.fas.fa-upload
-  span.icon.uploading
-    i.fal.fa-circle-notch.fa-spin
-  span.button-text Drag or click to attach files
-
-
-
-div.attachments__group
-  - model.send(attribute).each do |attachment|
-    div.attachments__attachment(style= attachment_style(attachment))
-      - unless attachment.representable?
-        div.preview-text
-          i.fas.fa-file(aria-hidden="true")
-
-      = link_to Satis::Engine.routes.url_helpers.attachment_path(attachment, sgid: model_sgid, attribute: attribute), data: {turbo_method: :delete, turbo_confirm: "Are you sure you want to delete this attachment?"}, class: 'attachments__button' do
-        i.fas.fa-xmark
-
-
-      = link_to Rails.application.routes.url_helpers.rails_blob_url(attachment, host: request.host + ":#{request.port}"), data: { turbo: true, turbolinks: false }, class: 'attachments__button', download: true do
-        i.fas.fa-download
-
-      span.attachments__filename
-        = attachment.filename
+turbo-frame id="#{model.id}_#{attribute}_attachments" target="_top" class="attachments__group"
+  div.attachment-upload.upload-btn.attachments__attachment data-controller="satis-attachment-upload" data-satis-attachment-upload-url-value=(model.persisted? ? Satis::Engine.routes.url_helpers.attachments_path(sgid: model_sgid, attribute: attribute) : false) data-satis-attachment-upload-parameter-name-value=(form&.field_name(attribute)||attribute) data-action="click->satis-attachment-upload#handleClick"
+    span.icon.upload
+      i.fas.fa-upload
+    span.icon.uploading
+      i.fal.fa-circle-notch.fa-spin
+    span.button-text data-satis-attachment-upload-target="button" Drag or click to attach files
+  = render partial: "satis/attachments/attachment", collection: model.send(attribute)

data/app/components/satis/attachments/component.rb

@@ -1,24 +1,16 @@
 module Satis
   module Attachments
     class Component < Satis::ApplicationComponent
-      attr_reader :model, :attribute, :attachments_options
+      attr_reader :model, :attribute, :attachments_options, :form
 
       def initialize(model, attribute, **options)
         super()
-        @model = model
+        @form = options[:form]
+        @model = model || form.object
         @attribute = attribute
         @attachments_options = options
       end
 
-      def attachment_style(attachment)
-        if attachment.representable?
-          url = attachment.representation(resize_to_limit: [200, 200]).processed.url
-          "background-image: url(#{url})"
-        else
-          "background-color: f0f0f0"
-        end
-      end
-
       def model_sgid
         @model.to_sgid(expires_in: nil, for: "satis_attachments")
       end

data/app/controllers/satis/attachments_controller.rb

@@ -4,32 +4,31 @@ module Satis
   class AttachmentsController < ApplicationController
     before_action :set_objects
 
-
-    def index
-      @attachments = @model.public_send(@attachment_type)
-      render json: @attachments
-    end
-
     def create
-      params[:attachments].each do |file|
-        @model.public_send(@attachment_type).attach(file)
-      end
-      redirect_to request.referer || root_path, notice: "Attachment created successfully."
+      @model.public_send(@attribute).attach(params[:attachments])
+      @attachments = @model.public_send(@attribute).last(params[:attachments].size)
 
+      respond_to do |format|
+        format.html { redirect_to request.referer || root_path, notice: "Attachment created successfully." }
+        format.turbo_stream
+      end
     end
 
     def destroy
-      attachment = @model.public_send(@attachment_type).find_by(id: params[:id])
-      attachment&.purge
+      @attachment = @model.public_send(@attribute).find_by(id: params[:id])
+      @attachment&.purge
 
-      redirect_to request.referer || root_path, notice: "Attachment deleted successfully."
+      respond_to do |format|
+        format.html { redirect_to request.referer || root_path, notice: "Attachment deleted successfully." }
+        format.turbo_stream
+      end
     end
 
     private
 
     def set_objects
-      @attachment_type = params[:attribute] || 'attachments'
-      @model = GlobalID::Locator.locate_signed(params[:sgid], for: 'satis_attachments')
+      @attribute = params[:attribute] || "attachments"
+      @model = GlobalID::Locator.locate_signed(params[:sgid], for: "satis_attachments")
     end
   end
-end
+end

data/app/javascript/satis/controllers/attachment_upload_controller.js

@@ -1,29 +1,48 @@
 import { Controller } from "@hotwired/stimulus"
+import { post } from "@rails/request.js"
 
 export default class AttachmentUploadController extends Controller {
-  static targets = ["input"]
+  static targets = ["button"]
+
+  static values = {
+    url: String,
+    parameterName: String
+  }
 
   connect() {
     this.createFileInput()
     this.addEventListeners()
   }
 
+  disconnect() {
+    this.fileInput.removeEventListener("change", this.handleChange.bind(this))
+    this.element.removeEventListener("dragover", this.handleDragOver.bind(this))
+    this.element.removeEventListener("dragleave", this.handleDragLeave.bind(this))
+    this.element.removeEventListener("dragenter", this.handleDragEnter.bind(this))
+    this.element.removeEventListener("drop", this.handleDrop.bind(this))
+  }
+
   createFileInput() {
+    // Mimic rails - this hiddenInput should prevent "old" files from being deleted
+    const hiddenInput = document.createElement("input")
+    hiddenInput.setAttribute("name", `${this.parameterNameValue}[]`)
+    hiddenInput.setAttribute("type", "hidden")
+    hiddenInput.setAttribute("autocomplete", "off")
+
+    this.element.closest('form').appendChild(hiddenInput)
+
     const input = document.createElement("input")
-    input.setAttribute("name", this.data.get("param-name") || "file")
+
+    input.setAttribute("name", `${this.parameterNameValue}[]`)
     input.setAttribute("type", "file")
     input.setAttribute("multiple", "multiple")
     input.style.display = "none"
-    this.element.appendChild(input)
-    this.fileInput = input
 
-    if (!this.data.has("param-name")) {
-      console.warn(this.element, "has no data-upload-param attribute, uploads may not work")
-    }
+    this.element.closest('form').appendChild(input)
+    this.fileInput = input
   }
 
   addEventListeners() {
-    this.element.addEventListener("click", this.handleClick.bind(this))
     this.fileInput.addEventListener("change", this.handleChange.bind(this))
     this.element.addEventListener("dragover", this.handleDragOver.bind(this))
     this.element.addEventListener("dragleave", this.handleDragLeave.bind(this))
@@ -32,12 +51,15 @@ export default class AttachmentUploadController extends Controller {
   }
 
   handleClick(event) {
-    event.preventDefault()
     this.fileInput.click()
   }
 
   handleChange(event) {
-    this.upload(event.target.files)
+    if (this.hasUrlValue) {
+      this.upload(event.target.files)
+    } else {
+      this.buttonTarget.innerHTML = `${event.target.files.length} files selected`
+    }
   }
 
   handleDragOver(event) {
@@ -59,7 +81,11 @@ export default class AttachmentUploadController extends Controller {
     event.preventDefault()
     this.element.classList.remove("dragging")
     if (event.dataTransfer.files.length > 0) {
-      this.upload(event.dataTransfer.files)
+      if (this.hasUrlValue) {
+        this.upload(event.dataTransfer.files)
+      } else {
+        this.buttonTarget.innerHTML = `${event.dataTransfer.files.length} files selected`
+      }
     }
   }
 
@@ -68,41 +94,17 @@ export default class AttachmentUploadController extends Controller {
     if (files.length === 0) return
 
     let formData = new FormData()
-    if (this.data.has("extra-data")) {
-      for (let [key, value] of Object.entries(JSON.parse(this.data.get("extra-data")))) {
-        formData.append(key, value)
-      }
-    }
 
     for (let i = 0; i < files.length; i++) {
-      formData.append(this.data.get("param-name"), files[i])
+      formData.append("attachments", files[i])
     }
 
     this.element.classList.add("uploading")
 
-    fetch(this.data.get("url"), {
-      method: 'POST',
+    post(this.urlValue, {
       body: formData,
-      headers: {
-        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content,
-        'Accept': 'text/html, application/json'
-      },
-      redirect: 'follow'  // Important: follow redirects
-    }).then((response) => {
-      // Check if the response is a redirect
-      if (response.type === 'opaqueredirect' || response.redirected) {
-        window.location.href = response.url
-        return
-      }
-
-      if (response.ok) {
-        this.element.classList.remove("uploading")
-        window.location.reload(true)
-      } else {
-        throw new Error(response.statusText)
-      }
-    }).catch((error) => {
-      console.log(error)
+      responseKind: 'turbo-stream'
+    }).then(html => {
       this.element.classList.remove("uploading")
     })
   }

data/app/javascript/satis/controllers/index.js

@@ -59,9 +59,6 @@ application.register("satis-fields-for", FieldsForController);
 import AttachmentUploadController from "satis/controllers/attachment_upload_controller";
 application.register("satis-attachment-upload", AttachmentUploadController);
 
-import AttachmentDeleteController from "satis/controllers/attachment_delete_controller";
-application.register("satis-attachment-delete", AttachmentDeleteController);
-
 import FormController from "satis/controllers/form_controller";
 application.register("satis-form", FormController);
 

data/app/views/satis/attachments/_attachment.html.slim

@@ -0,0 +1,13 @@
+div.attachments__attachment style=(attachment.representable? ? "background-image: url(#{attachment.representation(resize_to_limit: [200, 200]).processed.url})" : "background-color: f0f0f0") id="attachment_#{attachment.id}"
+  - unless attachment.representable?
+    div.preview-text
+      i.fas.fa-file(aria-hidden="true")
+
+  = link_to Satis::Engine.routes.url_helpers.attachment_path(attachment, sgid: attachment.record.to_sgid(expires_in: nil, for: "satis_attachments"), attribute: attachment.name), data: {turbo_method: :delete, turbo_confirm: "Are you sure you want to delete this attachment?"}, class: 'attachments__button' do
+    i.fas.fa-trash
+
+  = link_to Rails.application.routes.url_helpers.rails_blob_url(attachment, host: request.host + ":#{request.port}"), data: { turbo: false, turbolinks: false }, class: 'attachments__button', download: attachment.filename do
+    i.fas.fa-download
+
+  span.attachments__filename
+    = attachment.filename

data/app/views/satis/attachments/create.turbo_stream.slim

@@ -0,0 +1 @@
+= turbo_stream.append "#{@attachments.first.record.id}_#{@attachments.first.name}_attachments", partial: "satis/attachments/attachment", collection: @attachments

data/app/views/satis/attachments/destroy.turbo_stream.slim

@@ -0,0 +1 @@
+= turbo_stream.remove "attachment_#{@attachment.id}" 

data/lib/satis/forms/builder.rb

@@ -81,7 +81,7 @@ module Satis
         # FIXME: Yuk - is it possible to detect when this should not be allowed?
         # Like checking for whether destroy is allowed on assocations?
         allow_actions = options.key?(:allow_actions) ? options[:allow_actions] : true
-        show_actions = @object.respond_to?("#{name}_attributes=") && @object.send(name).respond_to?(:each) && template_object && allow_actions == true
+        show_actions = @object.respond_to?(:"#{name}_attributes=") && @object.send(name).respond_to?(:each) && template_object && allow_actions == true
 
         html_options = options[:html] || {}
 
@@ -156,6 +156,14 @@ module Satis
         hidden_input(method, options, &block)
       end
 
+      def attachments(method, options = {}, &block)
+        self.multipart = true
+        safe_join [
+          @template.render(Satis::Attachments::Component.new(object, method, form: self, **value_text_method_options(options),
+            &block))
+        ]
+      end
+
       # Non public
 
       def input_type_for(method, options)
@@ -181,7 +189,7 @@ module Satis
       def form_group(method, options = {}, &block)
         tag.div(class: "form-group form-group-#{method}", data: options.delete(:data)) do
           safe_join [
-            block.call,
+            yield,
             hint_text(options[:hint]),
             error_text(method)
           ].compact

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.49"
+  VERSION = "2.1.50"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.49
+  version: 2.1.50
 platform: ruby
 authors:
 - Tom de Grunt
@@ -871,7 +871,6 @@ files:
 - app/javascript/satis/application.js
 - app/javascript/satis/controllers/application.js
 - app/javascript/satis/controllers/application_controller.js
-- app/javascript/satis/controllers/attachment_delete_controller.js
 - app/javascript/satis/controllers/attachment_upload_controller.js
 - app/javascript/satis/controllers/fields_for_controller.js
 - app/javascript/satis/controllers/file_controller.js
@@ -890,6 +889,9 @@ files:
 - app/mailers/satis/application_mailer.rb
 - app/models/satis/application_record.rb
 - app/models/satis/user_data.rb
+- app/views/satis/attachments/_attachment.html.slim
+- app/views/satis/attachments/create.turbo_stream.slim
+- app/views/satis/attachments/destroy.turbo_stream.slim
 - app/views/satis/documentation/avatars/index.html.slim
 - app/views/satis/documentation/cards/index.html.slim
 - app/views/satis/documentation/editors/index.html.slim

data/app/javascript/satis/controllers/attachment_delete_controller.js

@@ -1,48 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-import { get } from '@rails/request.js'
-
-/***
- * Delete attachments controller
- *
- * Deletes an attachments
- */
-export default class AttachmentDeleteController extends Controller {
-  connect() {}
-
-  delete(event) {
-    const self = this
-
-    event.stopPropagation()
-    event.preventDefault()
-
-    const formData = new FormData()
-    formData.append("_method", "DELETE")
-
-    fetch(self.element.getAttribute("href"), {
-      method: "POST",
-      headers: {
-        "X-CSRF-Token": document.querySelector("meta[name=csrf-token]").content,
-      },
-      body: formData,
-    })
-      .then(self.handleErrors)
-      .then((response) => {
-        window.location.reload(true);
-        response.json().then(function (data) {
-          let node = document.querySelector(data.selector)
-          if (node) {
-            node.innerHTML = data.html
-          }
-        })
-      })
-      .catch((error) => {
-        console.log(error)
-      })
-    return false
-  }
-
-  handleErrors(response) {
-    if (!response.ok) throw new Error(response.status)
-    return response
-  }
-}