avo 0.4.7 → 0.5.0.beta2

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

@@ -0,0 +1,14 @@
+<%
+  icon = 'selector'
+
+  if params[:sort_by] == field.id.to_s
+    case params[:sort_direction]
+      when 'asc'
+        icon = 'sort-ascending'
+      when 'desc'
+        icon = 'sort-descending'
+      end
+  end
+%>
+
+<%= svg icon, class: 'inline-block fill-current text-gray-500 relative leading-none min-w-4 min-h-full ml-1 h-4' %>

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

@@ -0,0 +1,50 @@
+
+<thead class="bg-blue-gray-100 border-t border-b border-gray-300 pb-1">
+  <th>
+    <!-- Select cell -->
+  </th>
+  <%
+    fields.each_with_index do |field, index|
+      if params[:sort_by] == field.id.to_s
+        if params[:sort_direction] == 'asc'
+          sort_by = nil
+        else
+          sort_by = field.id
+        end
+
+        if sort_by.present?
+          case params[:sort_direction]
+            when nil
+              sort_direction = 'desc'
+            when 'desc'
+              sort_direction = 'asc'
+            when 'asc'
+              sort_direction = nil
+            end
+        else
+          sort_direction = nil
+        end
+      else
+        sort_by = field.id
+        sort_direction = 'desc'
+      end
+      classes = "text-blue-gray-600 tracking-tight leading-tight text-xs font-semibold"
+  %>
+    <th class="text-left uppercase px-3 py-2 ">
+      <% if field.sortable %>
+        <%= link_to params.permit!.merge(sort_by: sort_by, sort_direction: sort_direction), class: "flex items-center #{classes} #{'cursor-pointer' if field.sortable}", 'data-turbo-frame': params[:turbo_frame] do %>
+          <%= field.name %>
+          <%= render partial: 'avo/partials/sortable_component', locals: {field: field} %>
+        <% end %>
+      <% else %>
+          <div class="flex items-center <%= classes %>">
+            <%= field.name %>
+          </div>
+      <% end %>
+    </th>
+  <% end %>
+
+  <th class="w-24">
+    <!-- Controls cell -->
+  </th>
+</thead>

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

@@ -0,0 +1,17 @@
+<%
+  if available_view_types.count > 1
+    case view_type.to_sym
+    when :table
+      new_view_type = 'grid'
+      new_icon = 'view-grid'
+      translation_key = 'avo.grid_view'
+    when :grid
+      new_view_type = 'table'
+      new_icon = 'view-list'
+      translation_key = 'avo.table_view'
+    end
+%>
+  <%= a_link params.permit!.merge(view_type: new_view_type), color: :blue, 'data-turbo-frame': turbo_frame, title: t('avo.switch_to_view', { view_type: new_view_type }), 'data-tippy': 'tooltip' do %>
+    <%= svg new_icon %> <%= t(translation_key, { item: @resource.model_class.model_name.human.downcase }) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,29 @@
+<%= turbo_frame_tag 'attach_modal' do %>
+  <%= form_with scope: 'fields', url: "/avo/resources/#{params[:resource_name]}/#{params[:id]}/#{params[:related_name]}/", data: {'turbo-frame': '_top'} do |form| %>
+    <%= render Avo::ModalComponent.new do |c| %>
+      <% c.with :heading do %>
+        <%= t('avo.choose_item', { item: params[:related_name].downcase }) %>
+      <% end %>
+
+      <div class="flex-1 flex items-center justify-center px-8 text-lg mt-8 mb-12">
+        <div class="flex-1 flex flex-col items-center justify-center px-24 text-base">
+          <%= form.select :related_id, options_for_select(@options.map { |o| [o[:label], o[:value]] }, nil),
+            {
+              include_blank: t('avo.choose_an_option'),
+            },
+            {
+              class: input_classes('w-full'),
+            }
+          %>
+        </div>
+      </div>
+
+      <%#= form.hidden_field :resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
+
+      <% c.with :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 %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<div class="w-10/12 ml-1/12 inset-auto bottom-0 z-50 my-4 opacity-50 hover:opacity-100 transition-opacity duration-150 group">
+  <a href="https://avohq.io/pricing" target="_blank" class="rounded bg-teal-700 text-white py-2 px-4 text-sm block group-hover:pt-4">
+    <% if icon.present? %>
+      <div class="h-6 inline mr-1 text-bold" :is="iconElement" v-if="icon">
+        <%= title %>
+      </div>
+    <% end %>
+    <div class="group-hover:block hidden py-2">
+      <%= message %> <arrow-circle-right-icon class="h-6 inline float-right"></arrow-circle-right-icon>
+    </div>
+  </a>
+</div>

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

@@ -0,0 +1,6 @@
+<% if license[:id] == 'pro' and license[:valid] == false %>
+  <%= render_license_warning title: 'Trial Mode', message: 'You are experiencing paid features that need to be licensed before deploying this site. Enjoy!' %>
+<% end %>
+<% if license[:error].present? %>
+  <%= render_license_warning title: 'Avo HQ Error', message: "#{license[:error]}. Checking back every 5 minutes." %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<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 %>
+    <% end %>
+
+    <div class="flex-1 flex flex-col justify-between">
+      <div class="tools py-4">
+        <%= render Avo::NavigationLinkComponent.new label: 'Get started', path: '/avo', active: :exclusive if Rails.env.development? %>
+        <%= render Avo::NavigationHeadingComponent.new label: t('avo.resources') %>
+
+        <div class="w-full">
+          <% Avo::App.get_navigation_items(_current_user).each do |resource| %>
+            <%= render Avo::NavigationLinkComponent.new label: resource.name.pluralize.humanize, path: resources_path(resource.model_class) %>
+          <% end %>
+        </div>
+
+      </div>
+
+      <%= render_license_warnings %>
+    </div>
+  </div>
+</div>

data/app/views/kaminari/_first_page.html.erb

@@ -0,0 +1,3 @@
+<span class="first">
+  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote, class: 'relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150' %>
+</span>

data/app/views/kaminari/_last_page.html.erb

@@ -0,0 +1,3 @@
+<span class="last">
+  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote, class: 'ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150' %>
+</span>

data/app/views/kaminari/_next_page.html.erb

@@ -0,0 +1,9 @@
+<% if !current_page.last? %>
+  <%= link_to url, :id => 'pnnext',:remote => remote do %>
+    <button type="button" class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150">
+      <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
+      </svg>
+    </button>
+  <% end %>
+<% end %>

data/app/views/kaminari/_page.html.erb

@@ -0,0 +1,12 @@
+<% url = resources_path(@resource.model_class, page: page, keep_query_params: true) %>
+<% if page.current? %>
+  <button type="button" class="hidden md:inline-flex -ml-px relative items-center px-4 py-2 border bg-gray-100 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 z-10 outline-none border-primary-300 active:bg-gray-100 transition ease-in-out duration-150">
+    <%= page %>
+  </button>
+<% else %>
+  <%= link_to url, :remote => remote  do %>
+    <button type="button" class="hidden md:inline-flex -ml-px relative items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
+      <%= page %>
+    </button>
+  <% end %>
+<% end %>

data/app/views/kaminari/_prev_page.html.erb

@@ -0,0 +1,9 @@
+<% if !current_page.first? %>
+  <%= link_to url, :id => 'pnprev', :remote => remote  do %>
+    <button type="button" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150">
+  	  <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+        <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"/>
+  	  </svg>
+	</button>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<div class="border-gray-300 <%= 'border-t' if index != 0 %>">
+  <div class="p-4 pb-0 text-sm font-bold text-gray-600">
+    <%= name %>
+  </div>
+  <div class="p-4">
+    <%= yield %>
+  </div>
+</div>

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

@@ -1,61 +1,49 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Avo</title>
+  <title>Avo Hotwire</title>
+
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
-  <%= render partial: 'layouts/avo/javascript' %>
+
+  <%= render partial: 'avo/partials/javascript' %>
 
   <%= javascript_pack_tag 'application' %>
   <%= stylesheet_pack_tag 'application', media: 'all' %>
-  <%= render partial: 'layouts/avo/translations' %>
-  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
 </head>
-
-<body class="bg-gray-200">
+<body class="bg-blue-gray-200">
 
 <div id="app" class="flex min-h-screen flex-row h-full">
-  <app-layout class="flex flex-1 w-full"
-    :router-key="routerKey"
-    :layout="layout"
-    inline-template
-  >
-    <div>
-      <application-sidebar v-if="layout !== 'blank'">
-        <template #logo>
-          <%= render_logo %>
-        </template>
-        <template #licensing>
-          <license-warnings></license-warnings>
-        </template>
-      </application-sidebar>
-
-      <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 %>
-          </div>
-          <div class="flex-1 flex justify-center">
-            <div class="w-64">
-              <resources-search :global="true">
-            </div>
-          </div>
-        </div>
+  <div class="flex flex-1 w-full">
+    <%= render partial: 'avo/sidebar/sidebar' %>
 
-        <div v-if="layout === 'blank'" class="h-full w-full flex justify-center items-center">
-          <%= yield %>
+    <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 %>
         </div>
-
-        <div class="content p-8 flex-1 flex flex-col justify-between items-stretch" v-else>
-          <%= yield %>
-          <%= render_footer %>
+        <div class="flex-1 flex justify-center">
+          <div class="w-64">
+            <%# <resources-search :global="true"> %>
+          </div>
         </div>
       </div>
+
+      <div class="content p-8 flex-1 flex flex-col justify-between items-stretch <%= @container_classes %>">
+        <%= yield %>
+        <%= render_footer %>
+      </div>
     </div>
-  </app-layout>
+  </div>
+  <%= turbo_frame_tag 'actions_show' %>
+  <%= turbo_frame_tag 'attach_modal' %>
+  <%= turbo_frame_tag 'destroy_attachment_form' %>
+
+  <%= turbo_frame_tag 'alerts' do %>
+    <%= render partial: 'avo/partials/alerts' %>
+  <% end %>
 </div>
 
 <%= render_scripts %>
-
 </body>
 </html>

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

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Avo</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <%= render partial: 'layouts/avo/javascript' %>
+
+  <%= javascript_pack_tag 'application' %>
+  <%= stylesheet_pack_tag 'application', media: 'all' %>
+  <%= render partial: 'layouts/avo/translations' %>
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
+</head>
+
+<body class="bg-gray-200">
+
+<div id="app" class="flex min-h-screen flex-row h-full">
+  <app-layout class="flex flex-1 w-full"
+    :router-key="routerKey"
+    :layout="layout"
+    inline-template
+  >
+    <div>
+      <application-sidebar v-if="layout !== 'blank'">
+        <template #logo>
+          <%= render_logo %>
+        </template>
+        <template #licensing>
+          <license-warnings></license-warnings>
+        </template>
+      </application-sidebar>
+
+      <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 %>
+          </div>
+          <div class="flex-1 flex justify-center">
+            <div class="w-64">
+              <resources-search :global="true">
+            </div>
+          </div>
+        </div>
+
+        <div v-if="layout === 'blank'" class="h-full w-full flex justify-center items-center">
+          <%= yield %>
+        </div>
+
+        <div class="content p-8 flex-1 flex flex-col justify-between items-stretch" v-else>
+          <%= yield %>
+          <%= render_footer %>
+        </div>
+      </div>
+    </div>
+  </app-layout>
+</div>
+
+<%= render_scripts %>
+
+</body>
+</html>

data/avo.gemspec

@@ -30,10 +30,9 @@ Gem::Specification.new do |spec|
   spec.post_install_message = "Thank you for using Avo! Docs are available at https://docs.avohq.io"
 
   spec.files = Dir['{bin,app,config,db,lib,public}/**/*', 'MIT-LICENSE', 'Rakefile', 'README.md', 'avo.gemspec', 'Gemfile', 'Gemfile.lock']
-    .reject { |file| file.start_with? 'app/frontend' }
 
   spec.add_dependency 'rails', '>= 6.0'
-  spec.add_dependency 'kaminari'
+  spec.add_dependency 'pagy'
   spec.add_dependency 'zeitwerk'
   spec.add_dependency 'inline_svg'
   spec.add_dependency 'webpacker'
@@ -41,4 +40,8 @@ Gem::Specification.new do |spec|
   spec.add_dependency 'pundit'
   spec.add_dependency 'httparty'
   spec.add_dependency 'i18n-js'
+  spec.add_dependency 'active_link_to'
+  spec.add_dependency 'image_processing'
+  spec.add_dependency 'view_component'
+  spec.add_dependency 'hotwire-rails'
 end

data/bin/helpers.rb

@@ -0,0 +1,34 @@
+require 'fileutils'
+
+def app_root
+  root = File.expand_path('..', __dir__)
+
+  FileUtils.chdir(root) do
+    yield
+  end
+end
+
+def run!(*args)
+  system(*args) || abort("\nCommand `#{args}` failed")
+end
+
+def header(msg)
+  divider = '=' * msg.length
+
+  puts "\n\e\u001b[1m#{divider}\e[0m"
+  puts "\u001b[1m#{msg}\e[0m"
+  puts "\e\u001b[1m#{divider}\e[0m\n\n"
+end
+
+def ask(question:, valid_answers: [])
+  puts "\n#{question} (#{valid_answers.join('/')})"
+
+  input = gets.downcase.chomp
+
+  while !valid_answers.include?(input)
+    puts 'Invalid input, please try again.'
+    input = gets.downcase.chomp
+  end
+
+  input
+end

data/bin/init

@@ -0,0 +1,35 @@
+#!/usr/bin/env ruby
+
+require_relative 'helpers'
+
+app_root do
+  use_docker = ask(
+    question: 'Would you like to use Docker Compose for Postgres?',
+    valid_answers: ['y', 'N']
+  )
+
+  header 'Configuring git'
+  run! 'git remote add upstream https://github.com/avo-hq/avo.git'
+
+  header 'Installing gems'
+  run! 'bundle install'
+
+  header 'Installing Yarn packages'
+  run! 'yarn'
+
+  if use_docker
+    header 'Creating the Docker volume'
+    run! 'docker volume create --name=avo-db-data'
+
+    header 'Creating and running the Docker image'
+    run! 'docker-compose up -d'
+  end
+
+  header 'Preparing the database'
+  run! 'bin/rails db:setup'
+
+  if use_docker
+    header 'Stopping the Docker image'
+    run! 'docker-compose stop'
+  end
+end