avo 1.0.4 → 1.3.0.pre.1

data/app/controllers/avo/base_controller.rb

@@ -9,6 +9,9 @@ module Avo
     before_action :set_model, only: [:show, :edit, :destroy, :update]
 
     def index
+      @page_title = resource_name.humanize
+      add_breadcrumb resource_name.humanize
+
       set_index_params
       set_filters
       set_actions
@@ -48,15 +51,28 @@ module Avo
       set_actions
 
       @resource = @resource.hydrate(model: @model, view: :show, user: _current_user, params: params)
+
+      @page_title = @resource.default_panel_name
+      add_breadcrumb resource_name.humanize, resources_path(@resource.model_class)
+      add_breadcrumb @resource.model_title
     end
 
     def new
       @model = @resource.model_class.new
       @resource = @resource.hydrate(model: @model, view: :new, user: _current_user)
+
+      @page_title = @resource.default_panel_name
+      add_breadcrumb resource_name.humanize, resources_path(@resource.model_class)
+      add_breadcrumb t("avo.new").humanize
     end
 
     def edit
       @resource = @resource.hydrate(model: @model, view: :edit, user: _current_user)
+
+      @page_title = @resource.default_panel_name
+      add_breadcrumb resource_name.humanize, resources_path(@resource.model_class)
+      add_breadcrumb @resource.model_title, resource_path(@resource.model)
+      add_breadcrumb t("avo.edit").humanize
     end
 
     def create

data/app/controllers/avo/home_controller.rb

@@ -3,6 +3,8 @@ require_dependency "avo/application_controller"
 module Avo
   class HomeController < ApplicationController
     def index
+      @page_title = "Get started"
+
       unless Rails.env.development?
         redirect_to resources_path Avo::App.get_resources.min_by { |resource| resource.route_key }.model_class
       end

data/app/helpers/avo/application_helper.rb

@@ -7,30 +7,6 @@ module Avo
       Avo.webpacker
     end
 
-    def render_logo
-      render partial: "vendor/avo/partials/logo"
-    rescue
-      render partial: "avo/partials/logo"
-    end
-
-    def render_header
-      render partial: "vendor/avo/partials/header"
-    rescue
-      render partial: "avo/partials/header"
-    end
-
-    def render_footer
-      render partial: "vendor/avo/partials/footer"
-    rescue
-      render partial: "avo/partials/footer"
-    end
-
-    def render_scripts
-      render partial: "vendor/avo/partials/scripts"
-    rescue
-      ""
-    end
-
     def render_license_warnings
       render partial: "avo/sidebar/license_warnings", locals: {
         license: Avo::App.license.properties
@@ -45,12 +21,6 @@ module Avo
       }
     end
 
-    def panel(**args, &block)
-      render(Avo::PanelComponent.new(**args)) do |component|
-        capture(component, &block)
-      end
-    end
-
     def empty_state(resource_name)
       render partial: "avo/partials/empty_state", locals: {resource_name: resource_name}
     end

data/app/packs/entrypoints/application.css

@@ -14,6 +14,7 @@
 @import './../stylesheets/alerts.css';
 @import './../stylesheets/loader.css';
 @import './../stylesheets/pagination.css';
+@import './../stylesheets/breadcrumbs.css';
 
 @import './../stylesheets/components/status.css';
 @import './../stylesheets/components/code.css';

data/app/packs/entrypoints/application.js

@@ -19,6 +19,19 @@ window.Turbolinks = Turbo
 
 Mousetrap.bind('r r r', () => Turbo.visit(window.location.href, { action: 'replace' }))
 
+function initTippy() {
+  tippy('[data-tippy="tooltip"]', {
+    theme: 'light',
+    content(reference) {
+      const title = reference.getAttribute('title')
+      reference.removeAttribute('title')
+
+      return title
+    },
+  })
+}
+window.initTippy = initTippy
+
 const application = Application.start()
 
 const context = require.context('./../js/controllers', true, /\.js$/)
@@ -29,16 +42,7 @@ application.load(definitionsFromContext(fieldsContext))
 
 document.addEventListener('turbo:load', () => {
   document.body.classList.remove('turbo-loading')
-
-  tippy('[data-tippy="tooltip"]', {
-    theme: 'light',
-    content(reference) {
-      const title = reference.getAttribute('title')
-      reference.removeAttribute('title')
-
-      return title
-    },
-  })
+  initTippy()
 })
 document.addEventListener('turbo:visit', () => document.body.classList.add('turbo-loading'))
 document.addEventListener('turbo:submit-start', () => document.body.classList.add('turbo-loading'))

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

@@ -0,0 +1,132 @@
+import { Controller } from 'stimulus'
+import { castBoolean } from '@/js/helpers/cast_boolean'
+
+export default class extends Controller {
+  static targets = ['input', 'controller', 'rows']
+
+  fieldValue = []
+
+  options = {}
+
+  get keyInputDisabled() {
+    return !this.options.editable || this.options.disable_editing_keys
+  }
+
+  get valueInputDisabled() {
+    return !this.options.editable
+  }
+
+  connect() {
+    this.setOptions()
+
+    try {
+      const objectValue = JSON.parse(this.inputTarget.value)
+      Object.keys(objectValue).forEach((key) => this.fieldValue.push([key, objectValue[key]]))
+    } catch (error) {
+      this.fieldValue = []
+    }
+
+    this.updateKeyValueComponent()
+  }
+
+  addRow() {
+    if (this.options.disable_adding_rows || !this.options.editable) return
+    this.fieldValue.push(['', ''])
+    this.updateKeyValueComponent()
+  }
+
+  deleteRow(event) {
+    if (this.options.disable_deleting_rows || !this.options.editable) return
+    const { index } = event.target.dataset
+    this.fieldValue.splice(index, 1)
+    this.updateTextareaInput()
+    this.updateKeyValueComponent()
+  }
+
+  valueFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][1] = value
+
+    this.updateTextareaInput()
+  }
+
+  keyFieldUpdated(event) {
+    const { value } = event.target
+    const { index } = event.target.dataset
+    this.fieldValue[index][0] = value
+
+    this.updateTextareaInput()
+  }
+
+  updateTextareaInput() {
+    if (!this.hasInputTarget) return
+    let result = {}
+    if (this.fieldValue && this.fieldValue.length > 0) {
+      result = Object.assign(...this.fieldValue.map(([key, val]) => ({ [key]: val })))
+    }
+    this.inputTarget.value = JSON.stringify(result)
+  }
+
+  updateKeyValueComponent() {
+    let result = ''
+    let index = 0
+    this.fieldValue.forEach((row) => {
+      const [key, value] = row
+      result += this.interpolatedRow(key, value, index)
+      index++
+    })
+    this.rowsTarget.innerHTML = result
+    window.initTippy()
+  }
+
+  interpolatedRow(key, value, index) {
+    let result = `<div class="flex"><input type="text"
+  class="${this.options.inputClasses} border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-700 w-1/2 rounded-none focus:outline-none outline-none focus:border-none"
+  data-action="input->key-value#keyFieldUpdated"
+  placeholder="${this.options.key_label}"
+  data-index="${index}"
+  ${this.keyInputDisabled ? "disabled='disabled'" : ''}
+  value="${key}"
+  autofocus
+/>
+<input type="text"
+  class="${this.options.inputClasses} border-gray-600 border-r border-l-0 border-b-0 border-t-0 focus:border-gray-700 w-1/2 rounded-none focus:outline-none outline-none focus:border-none"
+  data-action="input->key-value#valueFieldUpdated"
+  placeholder="${this.options.value_label}"
+  data-index="${index}"
+  ${this.valueInputDisabled ? "disabled='disabled'" : ''}
+  value="${value}"
+  />`
+    if (this.options.editable) {
+      result += `<a
+  href="javascript:void(0);"
+  data-index="${index}"
+  data-action="click->key-value#deleteRow"
+  title="${this.options.delete_text}"
+  data-tippy="tooltip"
+  data-button="delete-row"
+  ${this.options.disable_deleting_rows ? "disabled='disabled'" : ''}
+  class="flex items-center justify-center p-2 px-3 border-l ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg></a>`
+    }
+    result += '</div>'
+
+    return result
+  }
+
+  setOptions() {
+    let fieldOptions
+
+    try {
+      fieldOptions = JSON.parse(this.controllerTarget.dataset.options)
+    } catch (error) {
+      fieldOptions = {}
+    }
+    this.options = {
+      ...fieldOptions,
+      inputClasses: this.controllerTarget.dataset.inputClasses,
+      editable: castBoolean(this.controllerTarget.dataset.editable),
+    }
+  }
+}

data/app/packs/stylesheets/breadcrumbs.css

@@ -0,0 +1,12 @@
+.breadcrumbs {
+  @apply relative text-sm text-gray-400 font-bold;
+
+  a,
+  span {
+    @apply inline-block text-gray-400;
+  }
+
+  a {
+    @apply hover:text-gray-500;
+  }
+}

data/app/packs/svgs/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+</svg>

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

@@ -9,7 +9,7 @@
   >
     <%= form_with model: @model, scope: 'fields', url: "/avo/resources/#{@resource.model_class.model_name.route_key}/actions/#{@action.param_id}", data: {'turbo-frame': '_top', 'action-target': 'form'} do |form| %>
       <%= render Avo::ModalComponent.new do |c| %>
-        <% c.with :heading do %>
+        <% c.heading do %>
           <%= @action.name %>
         <% end %>
 
@@ -25,7 +25,7 @@
           <% end %>
         <% end %>
 
-        <% c.with :controls do %>
+        <% c.controls do %>
           <%= a_button @action.cancel_button_label, 'data-action': 'click->modal#close', size: :sm %>
           <%= a_button @action.confirm_button_label, type: :submit, color: :green, size: :sm %>
         <% end %>

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

@@ -1,10 +1,10 @@
 <div class="flex flex-col">
-  <%= panel title: 'Welcome to Avo' do |c| %>
-    <% c.with :tools do %>
+  <%= render Avo::PanelComponent.new title: 'Welcome to Avo' do |c| %>
+    <% c.tools do %>
       <div class="text-sm italic">This page is visible only in development. It will be hidden in other environments.</div>
     <% end %>
 
-    <% c.with :body do %>
+    <% c.body do %>
       <div class="flex flex-col justify-between py-6 min-h-24">
         <div class="px-6 space-y-4">
           <h3>About</h3>

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

@@ -5,7 +5,7 @@
       'turbo-frame': '_top'
     } do |form| %>
     <%= render Avo::ModalComponent.new do |c| %>
-      <% c.with :heading do %>
+      <% c.heading do %>
         <%= t 'avo.choose_item', item: params[:related_name].downcase %>
       <% end %>
 
@@ -24,7 +24,7 @@
 
       <%#= form.hidden_field :resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
 
-      <% c.with :controls do %>
+      <% c.controls do %>
         <%= a_button t('avo.cancel'), 'data-action': 'click->modal#close', size: :sm %>
         <%= a_button t('avo.attach'), type: :submit, color: :green, size: :sm %>
       <% end %>

data/app/views/avo/sidebar/_sidebar.html.erb

@@ -1,7 +1,7 @@
 <div class="application-sidebar flex h-full bg-white text-white w-56 z-50 border-r border-gray-300">
   <div class="flex flex-col w-full">
     <%= link_to root_path, class: 'logo-placeholder h-16 bg-white p-2 flex justify-center' do %>
-      <%= render_logo %>
+      <%= render partial: "avo/partials/logo" %>
     <% end %>
 
     <div class="flex-1 flex flex-col justify-between">
@@ -10,9 +10,18 @@
         <%= render Avo::NavigationHeadingComponent.new label: t('avo.resources') %>
 
         <div class="w-full">
-          <% Avo::App.get_navigation_items(_current_user).each do |resource| %>
+          <% Avo::App.resources_navigation(_current_user).each do |resource| %>
             <%= render Avo::NavigationLinkComponent.new label: resource.name.pluralize.humanize, path: resources_path(resource.model_class) %>
           <% end %>
+
+          <% sidebar_partials = Avo::App.get_sidebar_partials %>
+          <% if sidebar_partials.present? %>
+            <%= render Avo::NavigationHeadingComponent.new label: t('avo.tools') %>
+
+            <% sidebar_partials.each do |partial| %>
+              <%= render partial: "/avo/sidebar/items/#{partial}" %>
+            <% end %>
+          <% end %>
         </div>
 
       </div>

data/app/views/layouts/avo/application.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Avo Hotwire</title>
+  <%= display_meta_tags site: Avo.configuration.app_name, reverse: true, separator: "—" %>
 
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
@@ -20,7 +20,7 @@
     <div class="flex-1 flex flex-col h-full overflow-auto">
       <div class="relative bg-white p-2 shadow-md h-16 w-full flex flex-shrink-0 items-center z-50" v-if="layout !== 'blank'">
         <div class="ml-6">
-          <%= render_header %>
+          <%= render partial: "avo/partials/header" %>
         </div>
         <div class="flex-1 flex justify-center">
           <div class="w-64">
@@ -31,7 +31,7 @@
 
       <div class="content p-8 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">
         <%= yield %>
-        <%= render_footer %>
+        <%= render partial: "avo/partials/footer" %>
       </div>
     </div>
   </div>
@@ -44,6 +44,7 @@
   <% end %>
 </div>
 
-<%= render_scripts %>
+<%= render partial: "avo/partials/scripts" %>
+<!-- Avo version: <%= Avo::VERSION %> -->
 </body>
 </html>

data/avo.gemspec

@@ -43,4 +43,6 @@ Gem::Specification.new do |spec|
   spec.add_dependency "view_component"
   spec.add_dependency "hotwire-rails"
   spec.add_dependency "addressable"
+  spec.add_dependency "meta-tags"
+  spec.add_dependency "breadcrumbs_on_rails"
 end

data/lib/avo/app.rb

@@ -129,10 +129,28 @@ module Avo
           .sort_by { |r| r.name }
       end
 
-      def get_navigation_items(user = nil)
+      def resources_navigation(user = nil)
         get_available_resources(user).select do |resource|
           resource.model_class.present?
         end
+          .select do |resource|
+            resource.visible_on_sidebar
+          end
+      end
+
+      # Insert any partials that we find in app/views/avo/sidebar/items.
+      def get_sidebar_partials
+        Dir.glob(Rails.root.join("app", "views", "avo", "sidebar", "items", "*.html.erb"))
+          .map do |path|
+            File.basename path
+          end
+          .map do |filename|
+            # remove the leading underscore (_)
+            filename[0] = ""
+            # remove the extension
+            filename.gsub!('.html.erb', '')
+            filename
+          end
       end
 
       def draw_routes
@@ -144,16 +162,17 @@ module Avo
             .select do |resource|
               resource != :BaseResource
             end
+            .select do |resource|
+              resource.is_a? Class
+            end
             .map do |resource|
-              if resource.is_a? Class
-                route_key = if resource.model_class.present?
-                  resource.model_class.model_name.route_key
-                else
-                  resource.to_s.underscore.gsub("_resource", "").downcase.pluralize.to_sym
-                end
-
-                resources route_key
+              route_key = if resource.model_class.present?
+                resource.model_class.model_name.route_key
+              else
+                resource.to_s.underscore.gsub("_resource", "").downcase.pluralize.to_sym
               end
+
+              resources route_key
             end
         end
       end