avo 2.9.2.pre1 → 2.10.0

data/app/javascript/js/controllers/fields/date_field_controller.js

@@ -2,125 +2,63 @@ import { Controller } from '@hotwired/stimulus'
 import { DateTime } from 'luxon'
 import flatpickr from 'flatpickr'
 
+import { castBoolean } from '../../helpers/cast_boolean'
+
 // Get the DateTime with the TZ offset applied.
 function universalTimestamp(timestampStr) {
   return new Date(new Date(timestampStr).getTime() + (new Date(timestampStr).getTimezoneOffset() * 60 * 1000))
 }
 
 export default class extends Controller {
-  static targets = ['input', 'fakeInput']
-
-  static values = {
-    view: String,
-    timezone: String,
-    format: String,
-    enableTime: Boolean,
-    pickerFormat: String,
-    firstDayOfWeek: Number,
-    time24Hr: Boolean,
-  }
-
-  get browserZone() {
-    const time = DateTime.local()
-
-    return time.zoneName
-  }
-
-  get initialValue() {
-    if (this.isOnShow || this.isOnIndex) {
-      return this.context.element.innerText
-    } if (this.isOnEdit) {
-      return this.inputTarget.value
-    }
-
-    return null
-  }
-
-  get isOnIndex() {
-    return this.viewValue === 'index'
-  }
-
-  get isOnEdit() {
-    return this.viewValue === 'edit'
-  }
-
-  get isOnShow() {
-    return this.viewValue === 'show'
-  }
-
-  // Parse the time as if it were UTC
-  get parsedValue() {
-    return DateTime.fromISO(this.initialValue, { zone: 'UTC' })
-  }
-
-  get displayTimezone() {
-    return this.timezoneValue || this.browserZone
-  }
+  static targets = ['input']
 
   connect() {
-    if (this.isOnShow || this.isOnIndex) {
-      this.initShow()
-    } else if (this.isOnEdit) {
-      this.initEdit()
-    }
-  }
-
-  // Turns the value in the controller wrapper into the timezone of the browser
-  initShow() {
-    this.context.element.innerText = this.parsedValue.setZone(this.displayTimezone).toFormat(this.formatValue)
-  }
-
-  initEdit() {
     const options = {
       enableTime: false,
       enableSeconds: false,
       // eslint-disable-next-line camelcase
-      time_24hr: this.time24HrValue,
+      time_24hr: false,
       locale: {
         firstDayOfWeek: 0,
       },
       altInput: true,
-      onChange: this.onChange.bind(this),
     }
+    const enableTime = castBoolean(this.inputTarget.dataset.enableTime)
 
     // Set the format of the displayed input field.
-    options.altFormat = this.pickerFormatValue
+    options.altFormat = this.inputTarget.dataset.pickerFormat
+
+    // Disable native input in mobile browsers
+    options.disableMobile = this.inputTarget.dataset.disableMobile
 
     // Set first day of the week.
-    options.locale.firstDayOfWeek = this.firstDayOfWeekValue
+    options.locale.firstDayOfWeek = this.inputTarget.dataset.firstDayOfWeek
 
     // Enable time if needed.
-    options.enableTime = this.enableTimeValue
-    options.enableSeconds = this.enableTimeValue
+    options.enableTime = enableTime
+    options.enableSeconds = enableTime
+
+    let currentValue
 
     // enable timezone display
-    if (this.enableTimeValue) {
-      options.defaultDate = this.parsedValue.setZone(this.displayTimezone).toISO()
+    if (enableTime) {
+      currentValue = DateTime.fromISO(this.inputTarget.value, { zone: window.Avo.configuration.timezone })
+      currentValue = currentValue.setZone(this.inputTarget.dataset.timezone)
+      currentValue = currentValue.toISO()
 
       options.dateFormat = 'Y-m-d H:i:S'
+      // eslint-disable-next-line camelcase
+      options.time_24hr = castBoolean(this.inputTarget.dataset.time24hr)
+      // this.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+      options.appTimezone = this.inputTarget.dataset.timezone
     } else {
       // Because the browser treats the date like a timestamp and updates it ot 00:00 hour, when on a western timezone the date will be converted with one day offset.
       // Ex: 2022-01-30 will render as 2022-01-29 on an American timezone
-      options.defaultDate = universalTimestamp(this.initialValue)
+      currentValue = universalTimestamp(this.inputTarget.value)
     }
 
-    flatpickr(this.fakeInputTarget, options)
-
-    this.updateRealInput(this.parsedValue.setZone(this.displayTimezone).toISO())
-  }
-
-  onChange(selectedDates) {
-    let time
-
-    if (this.timezoneValue) {
-      time = DateTime.fromISO(selectedDates[0].toISOString()).setZone('UTC', { keepLocalTime: true })
-    } else {
-      time = DateTime.fromISO(selectedDates[0].toISOString()).setZone('UTC', { keepLocalTime: false })
-    }
-    this.updateRealInput(time)
-  }
+    options.defaultDate = currentValue
 
-  updateRealInput(value) {
-    this.inputTarget.value = value
+    flatpickr(this.inputTarget, options)
   }
 }

data/app/javascript/js/controllers/loading_button_controller.js

@@ -7,33 +7,37 @@ export default class extends Controller {
   <div class="double-bounce2"></div>
 </div>`;
 
-  confirmed = false
-
-  connect() {
-    this.context.scope.element.addEventListener('click', (e) => {
-      // If the user has to confirm the action
-      if (this.confirmationMessage) {
-        // Intervene only if not confirmed
-        if (!this.confirmed) {
-          e.preventDefault()
-          if (window.confirm(this.confirmationMessage)) {
-            this.applyLoader()
-          }
-        }
-      } else {
+  static values = {
+    confirmationMessage: String,
+    confirmed: Boolean,
+  }
+
+  attemptSubmit(e) {
+    // If the user has to confirm the action
+    if (this.confirmationMessageValue) {
+      this.confirmAndApply(e)
+    } else {
+      this.applyLoader()
+    }
+
+    return null
+  }
+
+  confirmAndApply(e) {
+    // Intervene only if not confirmed
+    if (!this.confirmedValue) {
+      e.preventDefault()
+
+      if (window.confirm(this.confirmationMessageValue)) {
         this.applyLoader()
       }
-    })
+    }
   }
 
   get button() {
     return this.context.scope.element
   }
 
-  get confirmationMessage() {
-    return this.context.scope.element.getAttribute('data-avo-confirm')
-  }
-
   applyLoader() {
     const { button } = this
 
@@ -50,10 +54,10 @@ export default class extends Controller {
   }
 
   markConfirmed() {
-    this.confirmed = true
+    this.confirmedValue = true
   }
 
   markUnconfirmed() {
-    this.confirmed = false
+    this.confirmedValue = false
   }
 }

data/app/javascript/js/controllers/tabs_controller.js

@@ -0,0 +1,86 @@
+import { AttributeObserver } from '@stimulus/mutation-observers'
+import { Controller } from '@hotwired/stimulus'
+import { castBoolean } from '../helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['tab'];
+
+  static values = {
+    view: String,
+    activeTab: String,
+  };
+
+  get currentTab() {
+    return this.tabTargets.find(
+      (element) => element.dataset.tabId === this.activeTabValue,
+    )
+  }
+
+  targetTab(id) {
+    return this.tabTargets.find((element) => element.dataset.tabId === id)
+  }
+
+  changeTab(e) {
+    e.preventDefault()
+
+    const { params } = e
+    const { id } = params
+
+    this.setTheTargetPanelHeight(id)
+
+    this.hideTabs()
+    this.showTab(id)
+    this.markTabLoaded(id)
+
+    this.activeTabValue = id
+  }
+
+  /**
+   * Sets the target container height to the previous panel height so we don't get jerky tab changes.
+   */
+  setTheTargetPanelHeight(id) {
+    // Ignore this on edit.
+    // All tabs are loaded beforehand, they have their own height, and the page won't jiggle when the user toggles between them.
+    if (this.viewValue === 'edit' || this.viewValue === 'new') {
+      return
+    }
+
+    // We don't need to add a height to this panel because it was loaded before
+    if (castBoolean(this.targetTab(id).dataset.loaded)) {
+      return
+    }
+
+    // Get the height of the active panel
+    const { height } = this.currentTab.getBoundingClientRect()
+    // Set it to the target panel
+    this.targetTab(id).style.height = `${height}px`
+
+    // Wait until the panel loaded it's content and then remove the forced height
+    const observer = new AttributeObserver(this.targetTab(id), 'busy', {
+      elementUnmatchedAttribute: () => {
+        // The content is not available in an instant so delay the height reset a bit.
+        setTimeout(() => {
+          this.targetTab(id).style.height = ''
+        }, 300)
+        if (observer) observer.stop()
+      },
+    })
+    observer.start()
+  }
+
+  markTabLoaded(id) {
+    this.targetTab(id).dataset.loaded = true
+  }
+
+  showTab(id) {
+    this.tabTargets.forEach((element) => {
+      if (element.dataset.tabId === id) {
+        element.classList.remove('hidden')
+      }
+    })
+  }
+
+  hideTabs() {
+    this.tabTargets.map((element) => element.classList.add('hidden'))
+  }
+}

data/app/javascript/js/controllers.js

@@ -27,6 +27,7 @@ import SearchController from './controllers/search_controller'
 import SelectController from './controllers/select_controller'
 import SelectFilterController from './controllers/select_filter_controller'
 import SimpleMdeController from './controllers/fields/simple_mde_controller'
+import TabsController from './controllers/tabs_controller'
 import TagsFieldController from './controllers/fields/tags_field_controller'
 import TextFilterController from './controllers/text_filter_controller'
 import TippyController from './controllers/tippy_controller'
@@ -55,6 +56,7 @@ application.register('resource-show', ResourceShowController)
 application.register('search', SearchController)
 application.register('select', SelectController)
 application.register('select-filter', SelectFilterController)
+application.register('tabs', TabsController)
 application.register('tags-field', TagsFieldController)
 application.register('text-filter', TextFilterController)
 application.register('tippy', TippyController)

data/app/views/avo/base/index.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceIndexComponent.new(
       resource: @resource,
       resources: @resources,

data/app/views/avo/base/show.html.erb

@@ -1,3 +1,3 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection, actions: @actions) %>
 <% end %>

data/app/views/avo/cards/show.html.erb

@@ -1,3 +1,3 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%= render Avo::CardComponent.new card: @card %>
 <% end %>

data/app/views/avo/debug/index.html.erb

@@ -14,7 +14,7 @@
   hq_payload = Avo::Licensing::HQ.new(request).payload
 %>
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new title: 'Debug Avo', description: 'Use this page to debug the Avo license.' do |c| %>
+  <%= render Avo::PanelComponent.new(title: 'Debug Avo', description: 'Use this page to debug the Avo license.') do |c| %>
     <% c.tools do %>
     <% end %>
     <% c.bare_content do %>

data/app/views/avo/home/_actions.html.erb

@@ -11,6 +11,6 @@
       </div>
     </div>
 
-    <a href="https://docs.avohq.io/1.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
+    <a href="https://docs.avohq.io/2.0/actions.html" target="_blank" title="Avo Actions documentation" class="text-bold cursor-pointer block mt-2">Actions in the docs 👉</a>
   </div>
 </div>

data/app/views/avo/home/_dashboards.html.erb

@@ -0,0 +1,19 @@
+<div>
+  <h3>Dashboards</h3>
+
+  <div>There comes the point in your app's life when you need to display the data in an aggregated form like a metric or chart. That's what Avo's Dashboards are all about.</div>
+
+  <div>Generate a dashboard using the command below 👇👇</div>
+
+
+  <div class="mt-2">
+    <div class="mt-1">
+      <code class="p-1 rounded bg-sky-500 text-white">bin/rails generate avo:dashboard dashy</code>
+    </div>
+  </div>
+
+  <p>
+    <a href="https://docs.avohq.io/2.0/dashboards.html" target="_blank" title="Avo Dashboards documentation">Docs</a>
+  </p>
+</div>
+

data/app/views/avo/home/_filters.html.erb

@@ -11,6 +11,6 @@
       </div>
     </div>
 
-    <a href="https://docs.avohq.io/1.0/filters.html" target="_blank" title="Avo Filters documentation" class="text-bold cursor-pointer block mt-2">Filters in the docs 👉</a>
+    <a href="https://docs.avohq.io/2.0/filters.html" target="_blank" title="Avo Filters documentation" class="text-bold cursor-pointer block mt-2">Filters in the docs 👉</a>
   </div>
 </div>

data/app/views/avo/home/_resources.html.erb

@@ -35,7 +35,7 @@
   <% end %>
 
   <p>
-    <a href="https://docs.avohq.io/1.0/resources.html" target="_blank" title="Avo Resources documentation">Docs</a>
+    <a href="https://docs.avohq.io/2.0/resources.html" target="_blank" title="Avo Resources documentation">Docs</a>
   </p>
 </div>
 

data/app/views/avo/home/failed_to_load.html.erb

@@ -1,4 +1,4 @@
-<%= turbo_frame_wrap(params[:turbo_frame]) do %>
+<%= render Avo::TurboFrameWrapperComponent.new(params[:turbo_frame]) do %>
   <%
   classes = 'absolute inset-auto left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
   label = t 'avo.failed_to_load'

data/app/views/avo/home/index.html.erb

@@ -1,5 +1,5 @@
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.' do |c| %>
+  <%= render Avo::PanelComponent.new(title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |c| %>
     <% c.body do %>
       <div class="flex flex-col justify-between py-6 min-h-24">
         <div class="px-6 space-y-4">
@@ -23,10 +23,20 @@
               <li><span class="mr-2">👍</span> Grid view</li>
               <li><span class="mr-2">👍</span> Authorization</li>
               <li><span class="mr-2">👍</span> Localization</li>
+              <li><span class="mr-2">👍</span> Resource tools</li>
               <li><span class="mr-2">👍</span> Custom tools</li>
               <li><span class="mr-2">👍</span> Custom fields</li>
+              <li><span class="mr-2">👍</span> Menu editor</li>
               <li><span class="mr-2">👍</span> Search</li>
-              <li><span class="mr-2">🕐</span> Dashboards</li>
+              <li><span class="mr-2">👍</span> Dashboards</li>
+              <li><span class="mr-2">👍</span> Responsive design</li>
+              <li><span class="mr-2">👍</span> Menu editor</li>
+              <li><span class="mr-2">👍</span> Stimulus JS integration</li>
+              <li><span class="mr-2">👍</span> Tabs and panels</li>
+              <li><span class="mr-2">🕐</span> Resource cards</li>
+              <li><span class="mr-2">🕐</span> Track resource changes</li>
+              <li><span class="mr-2">🕐</span> Smart resource generation</li>
+              <li><span class="mr-2">🕐</span> Records preview</li>
               <li><span class="mr-2">🕐</span> Themes</li>
             </ul>
           </p>
@@ -37,6 +47,8 @@
           <div class="space">
             <%= render partial: 'resources' %>
             <hr class="my-6">
+            <%= render partial: 'dashboards' %>
+            <hr class="my-6">
             <%= render partial: 'filters' %>
             <hr class="my-6">
             <%= render partial: 'actions' %>

data/app/views/avo/partials/_javascript.html.erb

@@ -1,6 +1,6 @@
 <%= javascript_tag nonce: true do %>
   window.Avo = window.Avo || { configuration: {} }
   Avo.configuration.timezone = '<%= Avo.configuration.timezone %>'
-  Avo.configuration.root_path = '<%= Avo::App.root_path %>'
+  Avo.configuration.root_path = '<%= Avo.configuration.root_path %>'
   Avo.configuration.search_debounce = '<%= Avo.configuration.search_debounce %>'
 <% end %>

data/app/views/avo/partials/_tabs_toggle.html.erb

@@ -0,0 +1,20 @@
+<div class="flex">
+  <div class="button-group">
+    <% tabs.each do |tab| %>
+      <% is_active_view = tab.name.to_s == active_tab_name.to_s %>
+      <%= a_link resource_path(resource: @resource, model: @resource.model, keep_query_params: true, active_tab_name: tab.name, tab_turbo_frame: group.turbo_frame_id),
+          color: is_active_view ? :gray : :primary,
+          rounded: false,
+          size: :sm,
+          class: is_active_view ? ' bg-gray-100 border-gray-300' : ' z-20',
+          title: tab.description || tab.name,
+          data: {
+            tippy: 'tooltip',
+            'turbo-frame': group.turbo_frame_id,
+            control: "view-type-toggle-#{tab}"
+          } do %>
+        <%= tab.name %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/avo/private/design.html.erb

@@ -1,5 +1,5 @@
 <div class="flex flex-col">
-  <%= render Avo::PanelComponent.new title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.' do |c| %>
+  <%= render Avo::PanelComponent.new(title: 'Welcome to Avo', description: 'This page is visible only in development. It will be hidden in other environments.') do |c| %>
     <% c.tools do %>
       <%= a_link('/admin', icon: 'arrow-left', style: :primary, is_link: true) do %>
         Primary

data/config/routes.rb

@@ -23,7 +23,7 @@ Avo::Engine.routes.draw do
     delete "/:resource_name/:id/active_storage_attachments/:attachment_name/:attachment_id", to: "attachments#destroy"
 
     # Ordering
-    patch "/:resource_name/:id/order", to: "resources#order"
+    patch "/:resource_name/:id/order", to: "resources#order", as: "order"
     patch "/:resource_name/:id/:related_name/:related_id/order", to: "associations#order", as: "associations_order"
 
     # Actions

data/db/migrate/20210421064037_add_color_to_teams.rb

@@ -0,0 +1,5 @@
+class AddColorToTeams < ActiveRecord::Migration[6.0]
+  def change
+    add_column :teams, :color, :string
+  end
+end

data/db/migrate/20210423075924_add_progress_to_projects.rb

@@ -0,0 +1,5 @@
+class AddProgressToProjects < ActiveRecord::Migration[6.0]
+  def change
+    add_column :projects, :progress, :integer
+  end
+end

data/db/migrate/20210525143134_add_slug_to_users.rb

@@ -0,0 +1,6 @@
+class AddSlugToUsers < ActiveRecord::Migration[6.0]
+  def change
+    add_column :users, :slug, :string
+    add_index :users, :slug, unique: true
+  end
+end

data/lib/avo/app.rb

@@ -29,14 +29,21 @@ module Avo
         end
       end
 
-      def init(request:, context:, current_user:, root_path:, view_context:, params:)
+      # Renerate a dynamic root path using the URIService
+      def root_path(paths: [], query: {}, **args)
+        Avo::Services::URIService.parse(view_context.avo.root_url.to_s)
+          .append_paths(paths)
+          .append_query(query)
+          .to_s
+      end
+
+      def init(request:, context:, current_user:, view_context:, params:)
         self.error_messages = []
-        self.request = request
         self.context = context
         self.current_user = current_user
-        self.root_path = root_path
-        self.view_context = view_context
         self.params = params
+        self.request = request
+        self.view_context = view_context
 
         self.license = Licensing::LicenseManager.new(Licensing::HQ.new(request).response).license
         self.translation_enabled = license.has(:localization)

data/lib/avo/base_action.rb

@@ -13,7 +13,6 @@ module Avo
     class_attribute :view
     class_attribute :user
     class_attribute :resource
-    class_attribute :invalid_fields
     class_attribute :standalone, default: false
     class_attribute :visible
     class_attribute :may_download_file, default: false
@@ -22,7 +21,8 @@ module Avo
     attr_accessor :model
     attr_accessor :resource
     attr_accessor :user
-    attr_accessor :fields_loader
+
+    delegate :view, to: :class
 
     class << self
       def form_data_attributes
@@ -68,23 +68,6 @@ module Avo
       self.class.context
     end
 
-    def get_field_definitions
-      return [] if self.class.fields.blank?
-
-      self.class.fields.map do |field|
-        field.hydrate(action: self)
-      end
-    end
-
-    def get_fields
-      get_field_definitions.map do |field|
-        field.hydrate(action: self, model: @model)
-      end
-        .select do |field|
-        field.visible?
-      end
-    end
-
     def get_attributes_for_action
       get_fields.map do |field|
         [field.id, field.value]

data/lib/avo/base_card.rb

@@ -59,13 +59,7 @@ module Avo
     def frame_url(enforced_range: nil, params: {})
       enforced_range ||= initial_range || ranges.first
 
-      # append the parent params to the card request
-      begin
-        other_params = "&#{params.permit!.to_h.map { |k, v| "#{k}=#{v}" }.join("&")}"
-      rescue
-      end
-
-      "#{Avo::App.root_path}/dashboards/#{dashboard.id}/cards/#{id}?turbo_frame=#{turbo_frame}&index=#{index}&range=#{enforced_range}#{other_params}"
+      Avo::App.view_context.avo.dashboard_card_path(dashboard.id, id, turbo_frame: turbo_frame, index: index, range: enforced_range, **params.permit!)
     end
 
     def card_classes