satis 1.0.75 → 2.0.8

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

@@ -7,9 +7,11 @@ module Satis
       renders_many :tabs, Tab::Component
       renders_one :footer
 
-      attr_reader :icon, :title, :description, :menu, :content_padding, :header_background_color, :initial_actions, :key, :custom_tabs_link_html
+      attr_reader :identifier, :icon, :description, :menu, :content_padding, :header_background_color, :initial_actions, :persist, :key
+      attr_writer :scope
 
-      def initialize(icon: nil,
+      def initialize(identifier = nil,
+                     icon: nil,
                      title: nil,
                      description: nil,
                      menu: nil,
@@ -17,9 +19,18 @@ module Satis
                      header_background_color: {
                        dark: 'bg-gray-800', light: 'bg-white'
                      },
+                     custom_tabs_link: nil,
+                     scope: [],
                      actions: [],
-                     key: nil)
+                     key: nil,
+                     persist: true)
         super
+
+        if identifier.blank?
+          ActiveSupport::Deprecation.warn('Calling sts.card with the id parameter will become mandatory')
+        end
+
+        @identifier = identifier
         @title = title
         @title = @title.reject(&:blank?).compact.join(' ') if @title.is_a?(Array)
         @description = description
@@ -28,16 +39,32 @@ module Satis
         @content_padding = content_padding
         @header_background_color = header_background_color
         @initial_actions = actions
+        @persist = persist
         @key = key
+        @custom_tabs_link = custom_tabs_link
+        @scope = scope.present? ? scope : identifier
       end
 
-      def custom_tabs_link(&block)
-        return unless block_given?
-        @custom_tabs_link_html = block.call.html_safe
+      # def key
+      #   return unless @persist
+      #
+      #   @key ||= identifier.to_s.parameterize.underscore if identifier.present?
+      #   @key ||=  strip_tags(@title)&.parameterize&.underscore
+      #
+      #   [controller_name, action_name, params[:id], @key, 'tab'].compact.join('_')
+      # end
+
+      def title
+        return @title if @title
+
+        @title ||= ct('.title')
       end
 
-      def tabs?
-        tabs.present?
+      def custom_tabs_link(&block)
+        return @custom_tabs_link unless block_given?
+
+        @custom_tabs_link = block.call
+        # @custom_tabs_link_html = block.call.html_safe
       end
 
       def header?

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

@@ -20,22 +20,22 @@ module Satis
         @range = options.key?(:range) ? options[:range] : false
 
         @format = if options.key?(:format)
-                    options[:format]
-                  else
-                    { "weekday": 'long', "month": 'short', "year": 'numeric', "day": 'numeric',
-                      "hour": 'numeric', "minute": 'numeric', "hour12": false }
-                  end
+          options[:format]
+        else
+          {weekday: "long", month: "short", year: "numeric", day: "numeric",
+           hour: "numeric", minute: "numeric", hour12: false}
+        end
 
-        options[:input_html].merge!('data-satis-date-time-picker-target' => 'hiddenInput')
+        options[:input_html].merge!("data-satis-date-time-picker-target" => "hiddenInput", "data-action" => "change->satis-date-time-picker#hiddenInputChanged")
 
         # FIXME: deal with ranges and multiples
         hidden_value = options[:input_html][:value]
         hidden_value ||= @form.object.send(attribute)
         hidden_value = if hidden_value.is_a?(String)
-                         hidden_value&.split(' - ')&.map { |d| Time.parse(d).iso8601 }.join(' - ')
-                       else
-                         hidden_value&.iso8601
-                       end
+          hidden_value&.split(" - ")&.map { |d| Time.parse(d).iso8601 }&.join(" - ")
+        else
+          hidden_value&.iso8601
+        end
 
         options[:input_html][:value] = hidden_value
       end

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

@@ -1,8 +1,8 @@
-import ApplicationController from "../../../../frontend/controllers/application_controller"
+import ApplicationController from "satis/controllers/application_controller"
 import { createPopper } from "@popperjs/core"
-import { debounce } from "../../../../frontend/utils"
+import { debounce } from "satis/utils"
 
-export default class extends ApplicationController {
+export default class DateTimePickerComponentController extends ApplicationController {
   static targets = [
     "input",
     "hiddenInput",
@@ -46,29 +46,7 @@ export default class extends ApplicationController {
       this.multipleValue = false
     }
 
-    this.selectedValue = []
-    let startDate = new Date()
-    if (this.hiddenInputTarget.value) {
-      this.hiddenInputTarget.value.split(/;| - |\s/).forEach((value) => {
-        this.selectedValue.push(new Date(Date.parse(value)))
-      })
-    }
-
-    if (this.selectedValue.length == 0) {
-      this.selectedValue.push(
-        new Date(
-          startDate.getFullYear(),
-          startDate.getMonth(),
-          startDate.getDate(),
-          startDate.getHours(),
-          startDate.getMinutes(),
-          0
-        )
-      )
-    }
-
-    this.displayValue = new Date(this.selectedValue[0].getFullYear(), this.selectedValue[0].getMonth(), 1)
-    this.currentSelectNr = this.selectedValue.length
+    this.prepareSelection()
 
     if (!this.inlineValue) {
       this.popperInstance = createPopper(this.element, this.calendarViewTarget, {
@@ -79,7 +57,7 @@ export default class extends ApplicationController {
             name: "flip",
             enabled: true,
             options: {
-              boundary: this.element.closest(".satis-card"),
+              boundary: this.element.closest(".sts-card"),
             },
           },
           {
@@ -88,6 +66,7 @@ export default class extends ApplicationController {
           },
         ],
       })
+      this.popperInstance.state.elements.popper.popperInstance = () => this.popperInstance
     }
 
     this.boundClickedOutside = this.clickedOutside.bind(this)
@@ -112,6 +91,32 @@ export default class extends ApplicationController {
     }
   }
 
+  prepareSelection() {
+    this.selectedValue = []
+    let startDate = new Date()
+    if (this.hiddenInputTarget.value) {
+      this.hiddenInputTarget.value.split(/;| - |\s/).forEach((value) => {
+        this.selectedValue.push(new Date(Date.parse(value)))
+      })
+    }
+
+    if (this.selectedValue.length == 0) {
+      this.selectedValue.push(
+        new Date(
+          startDate.getFullYear(),
+          startDate.getMonth(),
+          startDate.getDate(),
+          startDate.getHours(),
+          startDate.getMinutes(),
+          0
+        )
+      )
+    }
+
+    this.displayValue = new Date(this.selectedValue[0].getFullYear(), this.selectedValue[0].getMonth(), 1)
+    this.currentSelectNr = this.selectedValue.length
+  }
+
   disconnect() {
     window.removeEventListener("click", this.boundClickedOutside)
     window.removeEventListener("keyup", this.boundKeyUp)
@@ -128,11 +133,10 @@ export default class extends ApplicationController {
       this.currentSelectNr = 1
 
       let today = new Date()
-      this.displayValue = new Date(today.getFullYear(), today.getMonth(), 1)
+       this.displayValue = new Date(today.getFullYear(), today.getMonth(), 1)
       this.hiddenInputTarget.value = ""
-      this.hiddenInputTarget.dispatchEvent(new Event("change"))
-      this.refreshCalendar()
       this.inputTarget.value = ""
+      this.hiddenInputTarget.dispatchEvent(new CustomEvent("change",{ detail: { src: "satis-date-time-picker" } }))
     }
     event.preventDefault()
   }
@@ -152,12 +156,12 @@ export default class extends ApplicationController {
 
   previousMonth(event) {
     this.displayValue = new Date(new Date(this.displayValue).setMonth(this.displayValue.getMonth() - 1))
-    this.refreshCalendar()
+    this.refreshCalendar(false)
   }
 
   nextMonth(event) {
     this.displayValue = new Date(new Date(this.displayValue).setMonth(this.displayValue.getMonth() + 1))
-    this.refreshCalendar()
+    this.refreshCalendar(false)
   }
 
   clickedOutside(event) {
@@ -219,18 +223,24 @@ export default class extends ApplicationController {
     }
   }
 
-  dateTimeEntered(event) {
-    return
+  hiddenInputChanged(event) {
+    this.prepareSelection()
+    this.refreshCalendar(false)
+    if(event?.detail?.src !== "satis-date-time-picker") {
+      this.refreshInputs(false)
+    }
+  }
 
+  dateTimeEntered(event) {
     // FIXME: This doesn't work properly yet
-    let newValue
-    try {
-      newValue = new Date(this.inputTarget.value)
-    } catch (error) {}
-    if (!isNaN(newValue.getTime())) {
-      this.selectedValue = [newValue]
-      this.refreshCalendar()
-    }
+    // let newValue
+    // try {
+    //   newValue = new Date(this.inputTarget.value)
+    // } catch (error) {}
+    // if (!isNaN(newValue.getTime())) {
+    //   this.selectedValue = [newValue]
+    //   this.refreshCalendar()
+    // }
   }
 
   selectDay(event) {
@@ -284,7 +294,7 @@ export default class extends ApplicationController {
   }
 
   // Refreshes the hidden and visible input values
-  refreshInputs() {
+  refreshInputs(dispatchEvent = true) {
     let joinChar = ";"
     if (this.rangeValue) {
       joinChar = " - "
@@ -300,7 +310,9 @@ export default class extends ApplicationController {
 
     if (inputValue.split(joinChar).length >= this.maxSelectNr) {
       this.hiddenInputTarget.value = inputValue
-      this.hiddenInputTarget.dispatchEvent(new Event("change"))
+      if (dispatchEvent) {
+        this.hiddenInputTarget.dispatchEvent(new Event("change"))
+      }
     }
 
     let format = this.formatValue
@@ -389,7 +401,11 @@ export default class extends ApplicationController {
     })
 
     if (refreshInputs != false) {
-      this.refreshInputs()
+      if (this.rangeValue && this.selectedValue.length == 2) {
+        this.refreshInputs()
+      } else {
+        this.refreshInputs(false)
+      }
     }
   }
 

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

@@ -0,0 +1,26 @@
+= turbo_frame_tag "dialog" do
+  .relative.z-50 data-controller="satis-dialog" aria-labelledby="modal-title" role="dialog" aria-modal="true"
+    .fixed.inset-0.bg-gray-500.bg-opacity-75.transition-opacity
+    .fixed.inset-0.z-50.w-screen.overflow-y-auto
+      .flex.min-h-full.items-end.justify-center.p-4.text-center.sm:items-center.sm:p-0
+        .relative.transform.overflow-hidden.rounded-lg.bg-white.px-4.pb-4.pt-5.text-left.shadow-xl.transition-all.sm:my-8.sm:w-full.sm:max-w-lg.sm:p-6
+          .absolute.right-0.top-0.hidden.pr-4.pt-4.sm:block
+            button.rounded-md.bg-white.text-gray-400.hover:text-gray-500.focus:outline-none.focus:ring-2.focus:ring-indigo-500.focus:ring-offset-2 type="button" data-action="satis-dialog#close"
+              span.sr-only
+                | Close
+              .fas.fa-xmark.h-6.w-6
+          .sm:flex.sm:items-start
+            - if icon?
+              .mx-auto.flex.h-12.w-12.flex-shrink-0.items-center.justify-center.sm:mx-0.sm:h-10.sm:w-10
+                i.h-6.w-6.-mt-1 class=icon
+            .mt-3.text-center.sm:mt-0.sm:text-left class=(icon? ? "sm:ml-4" : "")
+              h3#modal-title.text-base.font-semibold.leading-6.text-gray-900
+                = title
+              .mt-2
+                p.text-sm.text-gray-500
+                  = content
+          - if actions.present?
+            .mt-5.sm:mt-4.sm:flex.sm:flex-row-reverse
+              .grid.grid-flow-row.gap-1.sm:grid-flow-col
+                - actions.each do |action|
+                  = action

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+# Allows you to add dialogs to your page.
+# Depends on `= turbo_frame_tag "dialog"` being present in the page, satis' page component has this by default.
+#
+module Satis
+  module Dialog
+    class Component < Satis::ApplicationComponent
+      renders_many :actions
+
+      attr_reader :title, :icon
+      def initialize(title:, icon: nil)
+        @title = title
+        @icon = icon
+      end
+
+      def icon?
+        icon.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+import ApplicationController from "satis/controllers/application_controller"
+
+export default class DialogComponentController extends ApplicationController {
+  connect () {
+    super.connect()
+  }
+
+  disconnect () {
+
+  }
+
+  close() {
+    this.element.parentElement.removeAttribute("src")
+    this.element.remove()
+  }
+}

data/app/components/satis/dropdown/{component.scss → component.css}

@@ -6,7 +6,6 @@
 
   input {
     @apply dark:text-gray-300;
-    
   }
   
   .warning
@@ -17,4 +16,9 @@
       
     }
   }
+
+  .highlighted {
+    @apply bg-primary-200;
+    @apply font-bold;
+  }
 }

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

@@ -1,26 +1,34 @@
-div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controller="satis-dropdown" data-satis-dropdown-page-size-value=@page_size data-satis-dropdown-url-value=url data-satis-dropdown-url-params-value=(options[:url_params]||{}).to_json data-satis-dropdown-chain-to-value=@chain_to data-satis-dropdown-free-text-value=@free_text data-satis-dropdown-needs-exact-match-value="#{@needs_exact_match ? 'true' : 'false'}"
-  / Hidden (using CSS) form field containing results
-  = form.text_field(attribute, options[:input_html].reverse_merge(class: 'hidden'))
+div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controller="satis-dropdown" data-satis-dropdown-page-size-value=@page_size data-satis-dropdown-url-value=url data-satis-dropdown-url-params-value=(options[:url_params]||{}).to_json data-satis-dropdown-chain-to-value=@chain_to data-satis-dropdown-free-text-value=@free_text data-satis-dropdown-needs-exact-match-value="#{@needs_exact_match ? 'true' : 'false'}" data-satis-dropdown-is-multiple-value="#{options[:input_html][:multiple] || false}"
+  - selection = [nil]
+  - if options[:input_html][:value].present?
+    - selection = options_for_select(options_array(options[:input_html][:value]))
+
+  = form.select(attribute, selection, {}, options[:input_html].except(:multiple).reverse_merge(class: 'hidden', multiple: options[:input_html][:multiple] || false))
+
   .flex.flex-col
+    div.hidden.py-1 data-satis-dropdown-target="pills"
     .flex.flex-col.items-center
       .w-full
-        .h-12.p-1.bg-white.dark:bg-gray-800.flex.border.border-gray-300.dark:border-gray-700.rounded
+        .h-12.p-1.bg-white.dark:bg-gray-900.opacity-25.flex.border.border-gray-200.opacity-25.dark:border-gray-600.rounded.opacity-75
           .flex.flex-auto.flex-wrap
             / Input where you can search
-            input.p-1.px-2.appearance-none.outline-none.w-full.text-gray-800.dark:bg-gray-800 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
+            input.p-1.px-2.appearance-none.outline-none.w-full.text-gray-800.dark:bg-gray-800.dark:text-gray-300 data-action="input->satis-dropdown#search" data-satis-dropdown-target="searchInput" placeholder=placeholder autofocus=options[:autofocus]
           div
             / Reset button
             - unless @reset_button == false
-              button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset" tabindex="-1"
+              button.cursor-pointer.w-6.h-full.flex.items-center.text-gray-400.outline-none.focus:outline-none type="button" data-satis-dropdown-target="resetButton" data-action="click->satis-dropdown#reset focus->satis-dropdown#focus" tabindex="-1"
                 i.fas.fa-xmark
-          .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200.dark:border-gray-700
-            / Up/down chevrons
-            button.cursor-pointer.w-6.h-6.text-gray-600.outline-none.focus:outline-none data-action="click->satis-dropdown#toggleResultsList" data-satis-dropdown-target="toggleButton" tabindex="-1"
-              i.hidden.fas.fa-chevron-up
-              i.fas.fa-chevron-down
+          - unless @toggle_button == false
+            .text-gray-300.w-8.py-1.pl-2.pr-1.border-l.flex.items-center.border-gray-200.dark:border-gray-700
+              / Up/down chevrons
+              button.cursor-pointer.w-6.h-6.text-gray-600.outline-none.focus:outline-none type="button" data-action="click->satis-dropdown#toggleResultsList focus->satis-dropdown#focus" data-satis-dropdown-target="toggleButton" tabindex="-1"
+                i.hidden.fas.fa-chevron-up
+                i.fas.fa-chevron-down
+
+    template data-satis-dropdown-target="selectedItemsTemplate"
 
     / Container for results
-    .hidden.container.shadow.bg-white.border.border-gray-300.dark:bg-gray-800.dark:border-gray-700.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
+    .hidden.container.shadow.bg-white.border.border-gray-300.dark:text-gray-300.dark:bg-gray-800.dark:border-gray-700.z-10.rounded.max-h-select.overflow-y-auto.w-full data-satis-dropdown-target="results" data-action="scroll->satis-dropdown#scroll" tabindex="-1"
       .flex.flex-col.w-full data-satis-dropdown-target="items"
         - options[:collection]&.each do |item|
           - data_attrs = item.try(:third) ? item.third : {}
@@ -28,9 +36,15 @@ div.satis-dropdown data-action="keydown->satis-dropdown#dispatch" data-controlle
             - if custom_item_html?
                 = item_html(item)
             - else
-              .cursor-pointer.w-full.dark:border-gray-700.border-gray-100.border-b.hover:bg-primary-200
-                .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.hover:border-teal-100
+              .cursor-pointer.w-full.dark:border-gray-700.border-b.hover:bg-primary-200
+                .flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.hover:border-teal-2100
                   .w-full.items-center.flex
                     .mx-2.-mt-1
                       span = item.send(text_method)
 
+
+  template data-satis-dropdown-target="pillTemplate"
+    span.inline-flex.items-center.rounded.bg-primary-200.px-2.py-1.text-xs.font-medium.text-gray-600.mr-1.mt-1 data-satis-dropdown-target="pill"
+      button.inline-flex.items-center.justify-center.w-5.h-5.ml-1 data-action="click->satis-dropdown#removePill"
+        svg.w-3.h-3 xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor"
+          path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"

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

@@ -17,24 +17,28 @@ module Satis
         @free_text = options[:free_text]
         @needs_exact_match = options[:needs_exact_match]
         @reset_button = options[:reset_button] || options[:include_blank]
+        @toggle_button = options[:toggle_button] != false
 
         options[:input_html] ||= {}
+
         options[:input_html][:value] = hidden_value
 
         options[:input_html][:autofocus] ||= false
         if options[:input_html][:autofocus]
-          options[:autofocus] = 'autofocus'
+          options[:autofocus] = "autofocus"
           options[:input_html].delete(:autofocus)
         end
 
-        actions =  [options[:input_html]['data-action'], 'change->satis-dropdown#display',
-                   'focus->satis-dropdown#focus'].join(' ') unless options[:input_html]['data-reflex']
+        unless options[:input_html]["data-reflex"]
+          actions = [options[:input_html]["data-action"], "change->satis-dropdown#display",
+                     "focus->satis-dropdown#focus"].join(" ")
+        end
 
-        options[:input_html].merge!('data-satis-dropdown-target' => 'hiddenInput',
-                                    'data-action' => actions)
+        options[:input_html].merge!("data-satis-dropdown-target" => "hiddenSelect",
+                                    "data-action" => actions)
 
         @block = block
-        @page_size = options[:page_size] || 10
+        @page_size = options[:page_size] || 25
       end
 
       # Deal with context
@@ -42,11 +46,44 @@ module Satis
         value = @options[:selected]
         value ||= @options.dig(:input_html, :value)
         value ||= form.object&.send(attribute)
-        value = value.id if value.respond_to? :id
+
+        value = value.id if value.respond_to?(:id)
+
         value = value.second if value.is_a?(Array) && value.size == 2 && value.first.casecmp?(value.second)
         value
       end
 
+      def options_array(obj)
+        return [[]] unless obj
+
+        if obj.is_a?(Array)
+          obj.filter_map {|item| option_value(item) }
+        else
+          [option_value(obj)]
+        end
+      end
+
+      def option_value(item)
+        text = value = ""
+
+        if item.respond_to?(:id)
+          value = item.send(:id)
+          text = if item.respond_to?(:name)
+                    item.send(:name)
+                 else
+                    ""
+                 end
+        elsif item.is_a?(Array)
+          value = item.first
+          text = item.second
+        elsif item.is_a?(String)
+          text = value = item
+        end
+
+        return nil if value.blank?
+        [text, item, {selected: true}]
+      end
+
       def placeholder
         return title if title.present?