satis 2.1.46 → 2.1.47

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f84e47bc124b6590087e4afa8f9ef40a2dcb31664310001fa3a743aaa1a47f1
-  data.tar.gz: 87dbbcaccfa0f50446157e77b469303891396686620052827aa223b7a331687a
+  metadata.gz: 8b4aa4a7fdd94865ec844e8389cee2d3d19009f817a48d48bdb5e44b1ab7d12f
+  data.tar.gz: 6b6eaa2df3376c21b24bd32ef981963c1a6c6a564f6a7ccb2f8ffa8fe51d699f
 SHA512:
-  metadata.gz: 8544a8f0d11eaceb756422d707c05e06c381bb5f6e1e86fac5ecd65ea62607d3f917cb463efe4ad6804243709b3d7314fa7c2d607a7c1ce83cc3d9b8bf62ebab
-  data.tar.gz: 0f449812c72007560734829ebb52a21fcb50e9b569d25fece66b8e2489839e30244f770990309e6142486a70e489c246644a2e89ca8666bbbec5dc3a62616abb
+  metadata.gz: a3bf96d40e2775fb1042a21be50b0796db96d424a8bd2414934e246675ac60bb8cdadd55b27cb82b232f9f6d0e1bd961e154cf9e44902f14732dbd747fd23cff
+  data.tar.gz: 8ebb4d890726d4e1e3d76b65650091bbafa273e7756c01835f30aec4157e1c488539cd04e971158e96aa7b7651f1c50264ac64cf0ed4daa0c638c8a16bd41d03

data/app/assets/stylesheets/satis/application.css

@@ -1,4 +1,5 @@
 @import '../../../components/satis/appearance_switcher/component.css';
+@import '../../../components/satis/attachments/component.css';
 @import '../../../components/satis/breadcrumbs/component.css';
 @import '../../../components/satis/card/component.css';
 @import '../../../components/satis/call_to_action/component.css';

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

@@ -0,0 +1,136 @@
+.attachments__group {
+  @apply grid gap-6 mt-10 justify-start;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+.attachments__attachment {
+  @apply relative w-[200px] h-[200px] bg-cover bg-center bg-no-repeat rounded-lg shadow-md overflow-hidden;
+  @apply dark:bg-gray-900;
+}
+
+.attachments__attachment:hover {
+  @apply opacity-90;
+}
+
+.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;
+}
+
+.attachments__attachment .attachments__button:first-of-type {
+  @apply left-2.5;
+}
+
+.attachments__attachment .attachments__button:last-of-type {
+  @apply right-2.5;
+}
+
+.attachments__attachment:hover .attachments__button {
+  @apply block;
+}
+
+.attachments__attachment .attachments__filename {
+  @apply hidden absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-1.5 text-center text-xs;
+  @apply dark:bg-gray-900 dark:bg-opacity-90;
+}
+
+.attachments__attachment:hover .attachments__filename {
+  @apply block;
+}
+
+.preview-text {
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white bg-opacity-70 p-2.5 rounded text-sm text-gray-800;
+  @apply dark:bg-gray-800 dark:bg-opacity-70 dark:text-gray-200;
+}
+
+@media (max-width: 640px) {
+  .attachments__group {
+    grid-template-columns: repeat(auto-fill, 150px);
+  }
+
+  .attachments__attachment {
+    @apply w-[150px] h-[150px];
+  }
+}
+
+.icon.uploading {
+  display: none; /* Ensure this is hidden by default */
+}
+
+.uploading .icon.uploading {
+  display: inline-block; /* Show only when uploading */
+}
+
+.icon.upload {
+  display: inline-block; /* Ensure the upload icon is visible */
+}
+
+.uploading .icon.upload {
+  display: none; /* Hide the upload icon during upload */
+}
+
+.attachment-upload-button {
+  display: inline-block;
+}
+
+.upload-btn {
+  @apply dark:bg-gray-900 dark:text-white;
+  align-items: center;
+  padding: 10px 15px;
+  background-color: #f0f0f0;
+  border: 2px dashed #ccc;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: Arial, sans-serif;
+  color: #333;
+}
+
+.upload-btn:hover {
+  @apply dark:bg-gray-900 dark:text-white dark:border-gray-700;
+  background-color: #e0e0e0;
+  border-color: #999;
+}
+
+.upload-btn:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
+}
+
+.upload-btn .icon {
+  margin-right: 10px;
+  font-size: 18px;
+}
+
+.upload-btn .icon.upload {
+  color: #4a90e2;
+}
+
+.upload-btn .icon.uploading {
+  display: none;
+  color: #f39c12;
+}
+
+.uploading .upload-btn .icon.upload {
+  display: none;
+}
+
+.uploading .upload-btn .icon.uploading {
+  display: inline-block;
+}
+
+.upload-btn .button-text {
+  font-size: 14px;
+}
+
+.dragging .upload-btn {
+  background-color: #e8f0fe;
+  border-color: #4285f4;
+}
+
+.uploading .upload-btn {
+  @apply dark:bg-gray-800 dark:border-gray-600 dark:text-white;
+  background-color: #fcf8e3;
+  border-color: #f39c12;
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,26 @@
+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
+  - attachments = model_has_images ? model.images : model.attachments
+  - attachments.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

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

@@ -0,0 +1,34 @@
+module Satis
+  module Attachments
+    class Component < Satis::ApplicationComponent
+      include Rails.application.routes.url_helpers
+
+      attr_reader :model, :attribute, :attachments_options
+
+      def initialize(model, attribute, **options)
+        super()
+        @model = model
+        @attribute = attribute
+        @attachments_options = options
+      end
+
+      def model_has_images
+        model.respond_to?(:images)
+      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
+    end
+  end
+end

data/app/components/satis/attachments/create.json.jbuilder

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+json.selector 'div.attachments'
+json.html render partial: 'satis/attachments/index', layout: false, formats: [:html],
+                 locals: { attachments: @model.images, upload_url: polymorphic_path([@model, :attachments]) }

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

@@ -2,11 +2,11 @@
   @apply bg-white h-full sm:rounded-lg sm:shadow dark:bg-gray-800 overflow-hidden;
 
   &__header {
-    @apply px-4 py-5 sm:px-6 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;
+    @apply px-4 py-5 sm:px-6 dark:bg-gray-900 bg-white dark:border-gray-700 dark:text-gray-300;
   }
 
   &__tabs {
-    @apply bg-white px-4 border-b border-gray-200 sm:px-5 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;
+    @apply bg-white px-4 border-b border-gray-200 sm:px-5 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-gray-300;
 
     a:first {
       @apply ml-4;

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

@@ -1,6 +1,6 @@
 .sts-card data-controller="satis-tabs" data-satis-tabs-persist-value=persist data-satis-tabs-key-value=key id=identifier
   - if header?
-    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'} #{header_background_color[:light]} dark:#{header_background_color[:dark]}"
+    .sts-card__header class="#{tabs? ? '' : 'border-b border-gray-200'}"
       .-ml-4.-mt-4.flex.justify-between.items-center.flex-wrap.sm:flex-nowrap
         - if icon
           .ml-4.mt-4.flex-shrink-0.text-primary-600.dark:text-gray-300

data/app/components/satis/dropdown/component_controller.js

@@ -520,9 +520,7 @@ export default class DropdownComponentController extends ApplicationController {
     let matches = []
     this.itemTargets.forEach((item) => {
       const text = item.getAttribute("data-satis-dropdown-item-text")
-      const matched = this.needsExactMatchValue ?
-        searchValue.localeCompare(text, undefined, {sensitivity: 'base'}) === 0:
-        new RegExp(searchValue, "i").test(text)
+      const matched = this.needsExactMatchValue ? searchValue.localeCompare(text, undefined, {sensitivity: 'base'}) === 0 : text.toLowerCase().includes(searchValue.toLowerCase())
 
       const isHidden = item.classList.contains("hidden")
       if (!isHidden) {
@@ -622,8 +620,7 @@ export default class DropdownComponentController extends ApplicationController {
             this.itemTargets.forEach((item) => {
               const text = item.getAttribute("data-satis-dropdown-item-text")
               const matched = this.needsExactMatchValue
-                ? searchValue.localeCompare(text, undefined, { sensitivity: "base" }) === 0
-                : new RegExp(searchValue, "i").test(text)
+                ? searchValue.localeCompare(text, undefined, { sensitivity: "base" }) === 0 : text.toLowerCase().includes(searchValue.toLowerCase())
 
               const isHidden = item.classList.contains("hidden")
               if (!isHidden) {

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

@@ -3,7 +3,7 @@
 }
 
 .cm-editor{
-    @apply dark:bg-gray-900 dark:border dark:border-opacity-25 dark:border-gray-50 ;
+    @apply dark:bg-gray-900 dark:border dark:border-opacity-25 dark:text-white dark:border-gray-50 ;
 }
 
 .cm-editor .cm-gutter{

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

@@ -39,6 +39,10 @@
   display: none;
 }
 
+.sidebar.close .sts-sidebar-menu-item:hover > .sts-sidebar-menu-item__link {
+  width: 40px;
+}
+
 
 .sidebar.close .sts-sidebar-menu-item [data-satis-sidebar-menu-item-target="submenu"] .sts-sidebar-menu-item{
   display: none;

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

@@ -5,7 +5,7 @@
       - tabs.each do |tab|
         option selected=tab.selected? = ct(".#{tab.name}", scope: :tab)
   .hidden.sm:block
-    .border-b.border-gray-200.dark:border-opacity-25.dark:bg-gray-900.dark:bg-opacity-50
+    .border-b.border-gray-200.bg-white.dark:border-opacity-25.dark:bg-gray-900
       nav.sts-tabs__nav aria-label="Tabs"
         - tabs.each.with_index do |tab, index|
           - id = tab.id.present? ? tab.id : tab.name

data/app/controllers/satis/attachments_controller.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+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."
+
+    end
+
+    def destroy
+      attachment = @model.public_send(@attachment_type).find_by(id: params[:id])
+      attachment&.purge
+
+      redirect_to request.referer || root_path, notice: "Attachment deleted successfully."
+    end
+
+    private
+
+    def set_objects
+      @attachment_type = params[:attribute] || 'attachments'
+      @model = GlobalID::Locator.locate_signed(params[:sgid], for: 'satis_attachments')
+    end
+  end
+end

data/app/helpers/satis/application_helper.rb

@@ -3,13 +3,5 @@ module Satis
     def sts
       @_satis_helpers_container ||= Satis::Helpers::Container.new(self)
     end
-
-    def method_missing(method, *args, **kwargs, &block)
-      if method.to_s.ends_with?('_url') || method.to_s.ends_with?('_path') && main_app.respond_to?(method)
-        main_app.send(method, *args, **kwargs, &block)
-      else
-        super
-      end
-    end
   end
 end

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

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+import AttachmentUploadController from "./attachment_upload_controller";
+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
+  }
+}

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

@@ -0,0 +1,109 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class AttachmentUploadController extends Controller {
+  static targets = ["input"]
+
+  connect() {
+    this.createFileInput()
+    this.addEventListeners()
+  }
+
+  createFileInput() {
+    const input = document.createElement("input")
+    input.setAttribute("name", this.data.get("param-name") || "file")
+    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")
+    }
+  }
+
+  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))
+    this.element.addEventListener("dragenter", this.handleDragEnter.bind(this))
+    this.element.addEventListener("drop", this.handleDrop.bind(this))
+  }
+
+  handleClick(event) {
+    event.preventDefault()
+    this.fileInput.click()
+  }
+
+  handleChange(event) {
+    this.upload(event.target.files)
+  }
+
+  handleDragOver(event) {
+    event.preventDefault()
+    this.element.classList.add("dragging")
+  }
+
+  handleDragLeave(event) {
+    event.preventDefault()
+    this.element.classList.remove("dragging")
+  }
+
+  handleDragEnter(event) {
+    event.preventDefault()
+    this.element.classList.add("dragging")
+  }
+
+  handleDrop(event) {
+    event.preventDefault()
+    this.element.classList.remove("dragging")
+    if (event.dataTransfer.files.length > 0) {
+      this.upload(event.dataTransfer.files)
+    }
+  }
+
+  upload(files) {
+    // Only proceed if files are selected
+    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])
+    }
+
+    this.element.classList.add("uploading")
+
+    fetch(this.data.get("url"), {
+      method: 'POST',
+      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)
+      this.element.classList.remove("uploading")
+    })
+  }
+}

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

@@ -56,6 +56,13 @@ application.register("satis-link", LinkController);
 import FieldsForController from "satis/controllers/fields_for_controller";
 application.register("satis-fields-for", FieldsForController);
 
+import AttachmentUploadController from "satis/controllers/attachment_upload_controller";
+application.register("satis-fields-for", AttachmentUploadController);
+
+import AttachmentDeleteController from "satis/controllers/attachment_delete_controller";
+application.register("satis-fields-for", AttachmentDeleteController);
+
+
 import FormController from "satis/controllers/form_controller";
 application.register("satis-form", FormController);
 

data/config/routes.rb

@@ -1,6 +1,7 @@
 Satis::Engine.routes.draw do
   resources :user_data, only: %i[show update]
   resources :dialogs, only: %[show], constraints: { id: /[A-Za-z0-9\_\-\/]+/ }
+  resources :attachments, only: [:index, :create, :destroy]
 
   unless Rails.env.production?
     namespace :documentation do
@@ -15,3 +16,4 @@ Satis::Engine.routes.draw do
     resources :documentation
   end
 end
+

data/lib/satis/helpers/container.rb

@@ -20,6 +20,7 @@ module Satis
         add_helper :menu, Satis::Menu::Component
         add_helper :page, Satis::Page::Component
         add_helper :sidebar_menu, Satis::SidebarMenu::Component
+        add_helper :attachments, Satis::Attachments::Component
         add_helper :tabs, Satis::Tabs::Component
         add_helper :input, Satis::Input::Component
         add_helper :progress_bar, Satis::ProgressBar::Component

data/lib/satis/version.rb

@@ -1,3 +1,3 @@
 module Satis
-  VERSION = "2.1.46"
+  VERSION = "2.1.47"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: satis
 version: !ruby/object:Gem::Version
-  version: 2.1.46
+  version: 2.1.47
 platform: ruby
 authors:
 - Tom de Grunt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-09 00:00:00.000000000 Z
+date: 2025-01-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: browser
@@ -751,6 +751,10 @@ files:
 - app/components/satis/appearance_switcher/component.rb
 - app/components/satis/appearance_switcher/component_controller.js
 - app/components/satis/application_component.rb
+- app/components/satis/attachments/component.css
+- app/components/satis/attachments/component.html.slim
+- app/components/satis/attachments/component.rb
+- app/components/satis/attachments/create.json.jbuilder
 - app/components/satis/avatar/component.html.slim
 - app/components/satis/avatar/component.rb
 - app/components/satis/breadcrumbs/component.css
@@ -853,6 +857,7 @@ files:
 - app/components/satis/tabs/component.rb
 - app/components/satis/tabs/component_controller.js
 - app/controllers/satis/application_controller.rb
+- app/controllers/satis/attachments_controller.rb
 - app/controllers/satis/dialogs_controller.rb
 - app/controllers/satis/documentation/avatars_controller.rb
 - app/controllers/satis/documentation/cards_controller.rb
@@ -866,6 +871,8 @@ 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
 - app/javascript/satis/controllers/form_controller.js