avo 2.7.1.pre.1 → 2.8.0

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,6 +1,9 @@
-<div data-model-id="<%= @resource.model.id %>"
-  class="space-y-8"
->
+<%= content_tag :div,
+  class: "space-y-12",
+  data: {
+    'model-id': @resource.model.id,
+    **@resource.stimulus_data_attributes
+  } do %>
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
         scope: @resource.form_scope,
@@ -70,4 +73,4 @@
       <% end %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/views/resource_edit_component.rb

@@ -6,6 +6,7 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
 
   def initialize(resource: nil)
     @resource = resource
+    @view = :edit
 
     split_panel_fields
   end
@@ -29,6 +30,6 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   private
 
   def via_index?
-    params[:via_view] == 'index'
+    params[:via_view] == "index"
   end
 end

data/app/components/avo/views/resource_index_component.html.erb

@@ -1,4 +1,7 @@
-<div>
+<%= content_tag :div,
+  data: {
+    **@resource.stimulus_data_attributes
+  } do %>
   <%= render Avo::PanelComponent.new(title: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
     <% c.tools do %>
       <% if can_attach? %>
@@ -31,7 +34,7 @@
       >
         <% if @resource.search_query.present? %>
           <div class="flex items-center px-4 w-64">
-            <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_key} %>
+            <%= render partial: 'avo/partials/resource_search', locals: {resource: @resource.model_name.collection} %>
           </div>
         <% else %>
           <%# Offset for the space-y-2 property when the serach is missing %>
@@ -72,4 +75,4 @@
       <% end %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/views/resource_index_component.rb

@@ -28,11 +28,12 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
     @turbo_frame = turbo_frame
     @parent_model = parent_model
     @applied_filters = applied_filters
+    @view = :index
   end
 
   def title
     if @reflection.present?
-      return field.plural_name if field.present?
+      return name if field.present?
 
       reflection_resource.plural_name
     else
@@ -143,4 +144,9 @@ class Avo::Views::ResourceIndexComponent < Avo::ResourceComponent
   def reflection_model_class
     @reflection.active_record.to_s
   end
+
+  def name 
+    field.custom_name? ? field.name : field.plural_name
+  end
+
 end

data/app/components/avo/views/resource_new_component.html.erb

@@ -1,4 +1,9 @@
-<div>
+<%= content_tag :div,
+  class: "space-y-12",
+  data: {
+    'model-id': @resource.model.id,
+    **@resource.stimulus_data_attributes
+  } do %>
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
       scope: @resource.form_scope,
@@ -52,4 +57,4 @@
       <% end %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/views/resource_new_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Avo::Views::ResourceNewComponent < ViewComponent::Base
+class Avo::Views::ResourceNewComponent < Avo::ResourceComponent
   include Avo::ResourcesHelper
   include Avo::ApplicationHelper
 
@@ -10,6 +10,7 @@ class Avo::Views::ResourceNewComponent < ViewComponent::Base
   )
     @resource = resource
     @model = model
+    @view = :new
   end
 
   def back_path

data/app/components/avo/views/resource_show_component.html.erb

@@ -1,8 +1,11 @@
-<div data-model-id="<%= @resource.model.id %>"
-  data-selected-resources-name="<%= @resource.model_key %>"
-  data-selected-resources='["<%= @resource.model.id %>"]'
-  class="space-y-12"
->
+<%= content_tag :div,
+  class: "space-y-12",
+  data: {
+    'model-id': @resource.model.id,
+    selected_resources_name: @resource.model_key,
+    selected_resources: [@resource.model.id],
+    **@resource.stimulus_data_attributes
+  } do %>
   <% @resource.panels.each_with_index do |resource_panel, index| %>
     <%= render Avo::PanelComponent.new(title: title, description: @resource.resource_description, display_breadcrumbs: @reflection.blank?, index: index) do |c| %>
       <% c.tools do %>
@@ -99,7 +102,6 @@
       <% end %>
     <% end %>
   <% end %>
-
   <% if should_display_invalid_fields_errors? %>
     <turbo-stream action="append" target="alerts">
       <template>
@@ -109,4 +111,4 @@
       </template>
     </turbo-stream>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/views/resource_show_component.rb

@@ -9,6 +9,7 @@ class Avo::Views::ResourceShowComponent < Avo::ResourceComponent
     @reflection = reflection
     @resource_panel = resource_panel
     @actions = actions
+    @view = :show
 
     split_panel_fields
   end

data/app/controllers/avo/actions_controller.rb

@@ -85,7 +85,10 @@ module Avo
 
       return [default_message] if response[:messages].blank?
 
-      response[:messages]
+      response[:messages].select do |message|
+        # Remove the silent placeholder messages
+        message[:type] != :silent
+      end
     end
   end
 end

data/app/controllers/avo/base_controller.rb

@@ -75,9 +75,9 @@ module Avo
     end
 
     def show
-      set_actions
-
       @resource.hydrate(model: @model, view: :show, user: _current_user, params: params)
+      
+      set_actions
 
       @page_title = @resource.default_panel_name.to_s
 
@@ -102,7 +102,17 @@ module Avo
       @resource = @resource.hydrate(model: @model, view: :new, user: _current_user)
 
       @page_title = @resource.default_panel_name.to_s
-      add_breadcrumb @resource.plural_name.humanize, resources_path(resource: @resource)
+
+      if params[:via_relation_class].present? && params[:via_resource_id].present?
+        via_resource = Avo::App.get_resource_by_model_name params[:via_relation_class]
+        via_model = via_resource.class.find_scope.find params[:via_resource_id]
+        via_resource.hydrate model: via_model
+
+        add_breadcrumb via_resource.plural_name, resources_path(resource: via_resource)
+        add_breadcrumb via_resource.model_title, resource_path(model: via_model, resource: via_resource)
+      end
+
+      add_breadcrumb @resource.plural_name.humanize
       add_breadcrumb t("avo.new").humanize
     end
 
@@ -302,14 +312,10 @@ module Avo
     end
 
     def set_actions
-      if params[:resource_id].present?
-        model = @resource.class.find_scope.find params[:resource_id]
-      end
-
       @actions = @resource
         .get_actions
         .map do |action|
-          action.new(model: model, resource: @resource, view: @view)
+          action.new(model: @model, resource: @resource, view: @view)
         end
         .select { |action| action.visible_in_view }
     end

data/app/controllers/avo/search_controller.rb

@@ -51,8 +51,14 @@ module Avo
 
       results = apply_search_metadata(query, resource)
 
+      header = resource.plural_name
+
+      if results.length > 0
+        header += " (#{results.length})"
+      end
+
       result_object = {
-        header: resource.name.pluralize,
+        header: header,
         help: resource.class.search_query_help,
         results: results,
         count: results.length

data/app/javascript/js/controllers/custom/course_resource_controller.js

@@ -0,0 +1,102 @@
+import { Controller } from '@hotwired/stimulus'
+
+const LOADER_CLASSES = 'absolute bg-gray-100 opacity-10 w-full h-full'
+
+export default class extends Controller {
+  static targets = ['countrySelectInput', 'citySelectInput', 'citySelectWrapper'];
+
+  static values = {
+    view: String,
+  }
+
+  // Te fields initial value
+  static initialValue
+
+  get placeholder() {
+    return this.citySelectInputTarget.ariaPlaceholder
+  }
+
+  set loading(isLoading) {
+    if (isLoading) {
+      // create a loader overlay
+      const loadingDiv = document.createElement('div')
+      loadingDiv.className = LOADER_CLASSES
+      loadingDiv.dataset.target = 'city-loader'
+
+      // add the loader overlay
+      this.citySelectWrapperTarget.prepend(loadingDiv)
+      this.citySelectWrapperTarget.classList.add('opacity-50')
+    } else {
+      // remove the loader overlay
+      this.citySelectWrapperTarget.querySelector('[data-target="city-loader"]').remove()
+      this.citySelectWrapperTarget.classList.remove('opacity-50')
+    }
+  }
+
+  async connect() {
+    // Add the controller functionality only on forms
+    if (['edit', 'new'].includes(this.viewValue)) {
+      this.captureTheInitialValue()
+
+      // Trigger the change on load
+      await this.onCountryChange()
+    }
+  }
+
+  // Read the country select.
+  // If there's any value selected show the cities and prefill them.
+  async onCountryChange() {
+    if (this.hasCountrySelectInputTarget && this.countrySelectInputTarget) {
+      // Get the country
+      const country = this.countrySelectInputTarget.value
+      // Dynamically fetch the cities for this country
+      const cities = await this.fetchCitiesForCountry(country)
+
+      // Clear the select of options
+      Object.keys(this.citySelectInputTarget.options).forEach(() => {
+        this.citySelectInputTarget.options.remove(0)
+      })
+
+      // Add blank option
+      this.citySelectInputTarget.add(new Option(this.placeholder))
+
+      // Add the new cities
+      cities.forEach((city) => {
+        this.citySelectInputTarget.add(new Option(city, city))
+      })
+
+      // Check if the initial value is present in the cities array and select it.
+      // If not, select the first item
+      const currentOptions = Array.from(this.citySelectInputTarget.options).map((item) => item.value)
+      if (currentOptions.includes(this.initialValue)) {
+        this.citySelectInputTarget.value = this.initialValue
+      } else {
+        // Select the first item
+        this.citySelectInputTarget.value = this.citySelectInputTarget.options[0].value
+      }
+    }
+  }
+
+  // Private
+
+  captureTheInitialValue() {
+    this.initialValue = this.citySelectInputTarget.value
+  }
+
+  async fetchCitiesForCountry(country) {
+    if (!country) {
+      return []
+    }
+
+    this.loading = true
+
+    const response = await fetch(
+      `${window.Avo.configuration.root_path}/resources/courses/cities?country=${country}`,
+    )
+    const data = await response.json()
+
+    this.loading = false
+
+    return data
+  }
+}

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

@@ -32,8 +32,14 @@ export default class extends Controller {
       lineNumbers: true,
     }
 
+    const vm = this
+
     setTimeout(() => {
-      CodeMirror.fromTextArea(this.elementTarget, options)
+      CodeMirror.fromTextArea(this.elementTarget, options).on('change', (cm) => {
+        // Add this innerText change and dispatch an event to allow stimulus to pick up the input event.
+        vm.elementTarget.innerText = cm.getValue()
+        vm.elementTarget.dispatchEvent(new Event('input'))
+      })
     }, 1)
   }
 }

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

@@ -72,6 +72,7 @@ export default class extends Controller {
       result = Object.assign(...this.fieldValue.map(([key, val]) => ({ [key]: val })))
     }
     this.inputTarget.innerText = JSON.stringify(result)
+    this.inputTarget.dispatchEvent(new Event('input'))
   }
 
   updateKeyValueComponent() {

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

@@ -40,7 +40,6 @@ export default class extends BaseController {
       blacklist: this.disallowedItems,
       enforceWhitelist: this.enforceSuggestions,
       delimiters: this.delimiters.join('|'),
-      maxTags: 10,
       dropdown: {
         maxItems: 20,
         enabled: 0,

data/app/javascript/js/controllers/menu_controller.js

@@ -22,10 +22,11 @@ export default class extends Controller {
   }
 
   get initiallyCollapsed() {
-    if (this.userState === 'collapsed' || this.defaultState === 'collapsed') return true
-    if (this.userState === 'expanded' || this.defaultState === 'expanded') return false
+    if (this.defaultState === 'collapsed') {
+      return this.userState === 'collapsed'
+    }
 
-    return false
+    return this.userState === 'collapsed'
   }
 
   connect() {

data/app/javascript/js/controllers/resource_edit_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus'
+import camelCase from 'lodash/camelCase'
+
+export default class extends Controller {
+  static targets = []
+
+  static values = {
+    view: String,
+  }
+
+  debugOnInput(e) {
+    // eslint-disable-next-line no-console
+    console.log('onInput', e, e.target.value)
+  }
+
+  toggle({ params }) {
+    const { toggleTarget, toggleTargets } = params
+
+    if (toggleTarget) {
+      this.toggleAvoTarget(toggleTarget)
+    }
+
+    if (toggleTargets && toggleTargets.length > 0) {
+      toggleTargets.forEach(this.toggleAvoTarget.bind(this))
+    }
+  }
+
+  disable({ params }) {
+    const { disableTarget, disableTargets } = params
+
+    if (disableTarget) {
+      this.disableAvoTarget(disableTarget)
+    }
+
+    if (disableTargets && disableTargets.length > 0) {
+      disableTargets.forEach(this.disableAvoTarget.bind(this))
+    }
+  }
+
+  // Private
+
+  toggleAvoTarget(targetName) {
+    // compose the default wrapper data value
+    const target = camelCase(targetName)
+    const element = document.querySelector(`[data-resource-edit-target="${target}"]`)
+
+    if (element) {
+      element.classList.toggle('hidden')
+    }
+  }
+
+  disableAvoTarget(targetName) {
+    // compose the default wrapper data value
+    const target = camelCase(targetName)
+
+    // find & disable direct selector
+    document.querySelectorAll(`[data-resource-edit-target="${target}"]`).forEach(this.toggleItemDisabled)
+
+    // find & disable inputs
+    document.querySelectorAll(`[data-resource-edit-target="${target}"] input`).forEach(this.toggleItemDisabled)
+
+    // find & disable select fields
+    document.querySelectorAll(`[data-resource-edit-target="${target}"] select`).forEach(this.toggleItemDisabled)
+
+    // find & disable buttons for belongs_to
+    document.querySelectorAll(`[data-resource-edit-target="${target}"] [data-slot="value"] button`).forEach(this.toggleItemDisabled)
+  }
+
+  toggleItemDisabled(item) {
+    item.disabled = !item.disabled
+  }
+}

data/app/javascript/js/controllers/resource_index_controller.js

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+}

data/app/javascript/js/controllers/resource_show_controller.js

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+}

data/app/javascript/js/controllers/search_controller.js

@@ -55,7 +55,10 @@ export default class extends Controller {
   searchUrl(query) {
     const url = URI()
 
-    let params = { q: query }
+    return url.segment(this.searchSegments()).search(this.searchParams(query)).toString()
+  }
+
+  searchSegments() {
     let segments = [
       window.Avo.configuration.root_path,
       'avo_api',
@@ -67,6 +70,19 @@ export default class extends Controller {
       segments = [window.Avo.configuration.root_path, 'avo_api', 'search']
     }
 
+    return segments
+  }
+
+  searchParams(query) {
+    let params = {
+      q: query,
+      global: false,
+    }
+
+    if (this.isGlobalSearch) {
+      params.global = true
+    }
+
     if (this.isBelongsToSearch) {
       params = {
         ...params,
@@ -85,13 +101,13 @@ export default class extends Controller {
       }
     }
 
-    return url.segment(segments).search(params).toString()
+    return params
   }
 
   handleOnSelect({ item }) {
     if (this.isBelongsToSearch) {
-      this.hiddenIdTarget.setAttribute('value', item._id)
-      this.buttonTarget.setAttribute('value', item._label)
+      this.updateFieldAttribute(this.hiddenIdTarget, 'value', item._id)
+      this.updateFieldAttribute(this.buttonTarget, 'value', item._label)
 
       document.querySelector('.aa-DetachedOverlay').remove()
 
@@ -180,7 +196,7 @@ export default class extends Controller {
   }
 
   clearValue() {
-    this.clearValueTargets.map((e) => e.setAttribute('value', ''))
+    this.clearValueTargets.map((t) => this.updateFieldAttribute(t, 'value', ''))
     this.clearButtonTarget.classList.add('hidden')
   }
 
@@ -229,4 +245,11 @@ export default class extends Controller {
       this.buttonTarget.removeAttribute('disabled')
     }
   }
+
+  // Private
+
+  updateFieldAttribute(target, attribute, value) {
+    target.setAttribute(attribute, value)
+    target.dispatchEvent(new Event('input'))
+  }
 }

data/app/javascript/js/controllers.js

@@ -7,6 +7,7 @@ import BelongsToFieldController from './controllers/fields/belongs_to_field_cont
 import BooleanFilterController from './controllers/boolean_filter_controller'
 import CodeFieldController from './controllers/fields/code_field_controller'
 import CopyToClipboardController from './controllers/copy_to_clipboard_controller'
+import CourseResourceController from './controllers/custom/course_resource_controller'
 import DashboardCardController from './controllers/dashboard_card_controller'
 import DateFieldController from './controllers/fields/date_field_controller'
 import FilterController from './controllers/filter_controller'
@@ -20,6 +21,9 @@ import MobileController from './controllers/mobile_controller'
 import ModalController from './controllers/modal_controller'
 import MultipleSelectFilterController from './controllers/multiple_select_filter_controller'
 import PerPageController from './controllers/per_page_controller'
+import ResourceEditController from './controllers/resource_edit_controller'
+import ResourceIndexController from './controllers/resource_index_controller'
+import ResourceShowController from './controllers/resource_show_controller'
 import SearchController from './controllers/search_controller'
 import SelectController from './controllers/select_controller'
 import SelectFilterController from './controllers/select_filter_controller'
@@ -46,6 +50,9 @@ application.register('mobile', MobileController)
 application.register('modal', ModalController)
 application.register('multiple-select-filter', MultipleSelectFilterController)
 application.register('per-page', PerPageController)
+application.register('resource-edit', ResourceEditController)
+application.register('resource-index', ResourceIndexController)
+application.register('resource-show', ResourceShowController)
 application.register('search', SearchController)
 application.register('select', SelectController)
 application.register('select-filter', SelectFilterController)
@@ -61,3 +68,6 @@ application.register('date-field', DateFieldController)
 application.register('key-value', KeyValueController)
 application.register('simple-mde', SimpleMdeController)
 application.register('trix-field', TrixFieldController)
+
+// Custom controllers
+application.register('course-resource', CourseResourceController)

data/app/views/avo/associations/new.html.erb

@@ -16,7 +16,8 @@
             field: @field,
             model_key: @field.target_resource&.model_key,
             foreign_key: 'related_id',
-            resource: @resource
+            resource: @resource,
+            view: :new
           %>
         <% else %>
           <div class="flex-1 flex flex-col items-center justify-center px-0 md:px-24 text-base">

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

@@ -6,7 +6,7 @@
   <%= filter_wrapper name: filter.name do %>
     <%= select_tag filter.id, options_for_select(filter.options.invert, filter.applied_or_default_value(@applied_filters)),
       class: input_classes('w-full mb-0'),
-      include_blank: '—',
+      include_blank: filter.class.empty_message || '—',
       id: "avo_filters_#{filter.id.parameterize.underscore}",
       'data-filter-class': filter.class,
       'data-select-filter-target': 'selector',

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

@@ -7,6 +7,7 @@
     <%= text_field_tag filter.id, filter.applied_or_default_value(@applied_filters),
       class: input_classes('w-full mb-0'),
       id: "avo_filters_#{filter.id.parameterize.underscore}",
+      placeholder: filter.class.empty_message,
       'data-filter-class': filter.class.to_s,
       'data-text-filter-target': 'text',
       'data-action': 'keypress->text-filter#tryToSubmit'

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

@@ -1,3 +1,4 @@
-<%= link_to root_path, class: 'logo-placeholder h-10 bg-white flex justify-start' do %>
-  <%= image_tag '/avo-assets/logo.png', class: 'h-full', title: 'Avo' %>
+<%= link_to root_path, class: 'logo-placeholder h-full w-full flex justify-start' do %>
+  <%= image_tag '/avo-assets/logo.png', class: 'hidden sm:block object-contain', title: 'Avo' %>
+  <%= image_tag '/avo-assets/logomark.png', class: 'sm:hidden object-contain', title: 'Avo' %>
 <% end %>

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

@@ -2,7 +2,7 @@
   class="fixed bg-white p-2 w-full flex flex-shrink-0 items-center z-50 px-4 lg:px-4 border-b space-x-4 lg:space-x-0 h-16 <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
   v-if="layout !== 'blank'"
 >
-  <div class="flex items-center space-x-2 lg:space-x-0 w-32 sm:w-64 flex-shrink-0">
+  <div class="flex items-center space-x-2 lg:space-x-0 w-auto lg:w-64 flex-shrink-0 h-full">
     <%= a_button class: 'lg:hidden', icon: 'menu', size: :xs, compact: true, style: :text, data: { action: 'click->mobile#toggleSidebar' } %>
     <%= render partial: "avo/partials/logo" %>
   </div>

data/config/routes.rb

@@ -48,7 +48,7 @@ Avo::Engine.routes.draw do
     post "/debug/refresh_license", to: "debug#refresh_license"
   end
 
-  if Rails.env.development? or Rails.env.staging?
+  if Rails.env.development? || Rails.env.staging?
     scope "/avo_private", as: "avo_private" do
       get "/design", to: "private#design"
     end

data/db/factories.rb

@@ -72,5 +72,6 @@ FactoryBot.define do
 
   factory :course_link, class: "Course::Link" do
     link { Faker::Internet.url }
+    course { create :course }
   end
 end