avo 0.4.10 → 0.5.0.beta5

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

@@ -0,0 +1,71 @@
+<%= turbo_frame_tag "actions_show" do %>
+  <div
+    data-controller="action"
+    data-no-confirmation="<%= @action.no_confirmation %>"
+    data-action-target="controllerDiv"
+    data-resource-name="<%= @resource.model_class.model_name.route_key %>"
+    data-resource-id="<%= params[:id] %>"
+    class="hidden text-blue-gray-800"
+  >
+    <%= form_with 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 %>
+          <%= @action.name %>
+        <% end %>
+
+        <div class="flex-1 flex items-center justify-center px-8 text-lg mt-8 mb-12">
+          <%= @action.message %>
+        </div>
+
+        <%= form.hidden_field :resource_ids, value: params[:resource_ids], 'data-action-target': 'resourceIds' %>
+
+        <% if @action.get_fields.present? %>
+          <% @action.get_fields.each_with_index do |field, index| %>
+            <%= edit_field field, index, nil, form, displayed_in_modal: true %>
+          <% end %>
+        <% end %>
+
+        <% c.with :controls do %>
+          <%= a_button @action.cancel_text, 'data-action': 'click->modal#close', size: :sm %>
+          <%= a_button @action.confirm_text, type: :submit, color: :green, size: :sm %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>
+
+<%#
+      <div v-if="hasFields">
+        <component
+          v-for="(field, index) in fields"
+          :key="uniqueKey(field, index)"
+          :index="index"
+          :is="`edit-${field.component}`"
+          :field="field"
+          :errors="errors"
+          :resource-name="resourceName"
+          :field-id="field.id"
+          :via-resource-name="viaResourceName"
+          :via-resource-id="viaResourceId"
+          :field-component="field.component"
+          displayed-in="modal"
+        />
+      </div>
+      <div class="flex-1 flex items-center justify-center px-8 text-lg mt-8 mb-12" v-else>
+        {{ action.message }}
+      </div>
+      <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-200">
+        <a-button
+          size="sm"
+          @click="$emit('close')"
+          v-text="action.cancel_text"
+        />
+        <a-button
+          ref="confirm-button"
+          :color="buttonColor"
+          size="sm"
+          @click="handle"
+          v-text="action.confirm_text"
+        />
+    </div>
+      </div> %>

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

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag 'destroy_attachment_form' do %>
+  <%= form_with url: "/avo/resources/#{params[:resource_name]}/#{params[:id]
+    }/active_storage_attachments/#{params[:attachment_name]}/#{params[:signed_attachment_id]}", method: :delete, html: {'data-turbo-frame': 'destroy_attachment_form', 'data-controller': 'attachments', 'data-attachments-target': 'form', class: 'hidden' } do |form| %>
+    <%= form.button 'destroy', type: :submit %>
+    <%= form.hidden_field :referrer, value: request.referer, id: "referrer_destroy_attachment_#{params[:signed_attachment_id]}" %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,30 @@
+<% if @actions.count > 0 %>
+  <div class="relative z-30" data-controller="toggle-panel actions-picker">
+    <%= a_button class: "focus:outline-none",
+      color: 'light-blue',
+      'data-action': "click->toggle-panel#togglePanel",
+      'data-actions-dropdown-button': @resource.plural_name.downcase,
+      disabled: action_name != 'show' do
+    %>
+      <%= svg 'arrow-left', class: 'h-4 mr-1 transform -rotate-90' %> <%= t 'avo.actions' %>
+    <% end %>
+    <div
+      class="absolute block inset-auto right-0 top-full bg-white min-w-300px mt-2 py-4 z-20 shadow-context rounded-xl overflow-hidden hidden"
+      data-toggle-panel-target="panel"
+    >
+      <%
+        @actions.each_with_index do |action, index|
+          path = action_name == 'show' ?
+            "/avo/resources/#{@resource.model_class.model_name.route_key}/#{@model.id}/actions/#{action.param_id}" :
+            "/avo/resources/#{@resource.model_class.model_name.route_key}/actions/#{action.param_id}"
+      %>
+        <%= link_to path,
+          'data-turbo-frame': 'actions_show',
+          'data-action': 'click->actions-picker#visitAction',
+          class: 'flex items-center w-full py-2 px-4 font-bold text-gray-700 hover:text-white hover:bg-blue-500' do %>
+          <%= svg 'play', class: 'h-5 mr-1 inline' %> <%= action.name %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,33 @@
+<%
+  begin
+    decoded_filters_param = JSON.parse(Base64.decode64(params[:filters]))
+    set_value = decoded_filters_param[filter.class.to_s]
+  rescue => exception
+    if filter.default.present?
+      set_value = filter.default.stringify_keys
+    else
+      set_value = {}
+    end
+  end
+  set_value = {} if set_value.nil?
+%>
+<div data-controller="boolean-filter">
+  <%= filter_wrapper name: filter.name do %>
+    <div class="flex items-center">
+      <div class="space-y-2">
+        <% filter.options.each do |value, label| %>
+          <label class="flex items-center text-gray-700 text-sm">
+            <%= check_box_tag filter.id, value, set_value[value.to_s],
+              class: 'mr-2 text-lg h-4 w-4',
+              'data-filter-class': filter.class,
+              'data-boolean-filter-target': 'option',
+              'data-action': 'input->boolean-filter#changeFilter'
+            %>
+            <%= label %>
+          </label>
+        <% end %>
+      </div>
+      <%= link_to 'url_redirect', request.url, data: { 'boolean-filter-target': 'urlRedirect', 'turbo-frame': params[:turbo_frame] }, style: 'hidden', class: 'hidden' %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,29 @@
+<div data-controller="toggle-panel">
+  <div class="relative w-full flex justify-between z-30">
+    <%= a_button class: 'focus:outline-none',
+      color: 'blue-gray',
+      title: t('avo.click_to_reveal_filters'),
+      'data-action': 'click->toggle-panel#togglePanel',
+      'data-tippy': 'tooltip' do
+    %>
+      <%= svg 'filter' %> <%= t 'avo.filters' %>
+    <% end %>
+
+    <div
+      class="absolute block inset-auto right-0 top-full bg-white min-w-300px mt-2 z-20 shadow-context rounded-xl hidden divide-y divide-gray-300"
+      data-toggle-panel-target="panel"
+    >
+      <% @filters.each do |filter| %>
+        <%= render partial: filter.class.template, locals: {filter: filter} %>
+      <% end %>
+
+      <div class="p-4 border-gray-300 border-t">
+        <% if params[:filters].present? %>
+          <%= a_link t('avo.reset_filters'), resources_path(@resource.model_class, filters: nil, keep_query_params: true), color: 'blue-gray', class: 'w-full justify-center' %>
+        <% else %>
+          <%= a_button t('avo.reset_filters'), color: 'blue-gray', class: 'w-full justify-center', disabled: true %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+<%
+  begin
+    decoded_filters_param = JSON.parse(Base64.decode64(params[:filters]))
+    set_value = decoded_filters_param[filter.class.to_s]
+  rescue => exception
+    set_value = filter.default
+  end
+%>
+<div data-controller="select-filter">
+  <%= filter_wrapper name: filter.name do %>
+    <%= select_tag filter.id, options_for_select(filter.options.invert, set_value),
+      class: input_classes('w-full mb-0'),
+      include_blank: '—',
+      'data-filter-class': filter.class,
+      'data-select-filter-target': 'selector',
+      'data-action': "change->select-filter#changeFilter"
+    %>
+    <%= link_to 'url_redirect', request.url, data: { 'select-filter-target': 'urlRedirect', 'turbo-frame': params[:turbo_frame] }, style: 'hidden', class: 'hidden' %>
+  <% end %>
+</div>

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

@@ -0,0 +1 @@
+<%= render Avo::Views::ResourceEditComponent.new(resource: @resource) %>

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

@@ -0,0 +1,15 @@
+<%= turbo_frame_start params[:turbo_frame] %>
+  <%= render Avo::Views::ResourceIndexComponent.new(
+      resource: @resource,
+      resources: @resources,
+      models: @models,
+      pagy: @pagy,
+      index_params: @index_params,
+      filters: @filters,
+      actions: @actions,
+      reflection: @reflection,
+      turbo_frame: params[:turbo_frame],
+      parent_model: @parent_model,
+    )
+  %>
+<%= turbo_frame_end params[:turbo_frame] %>

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

@@ -0,0 +1 @@
+<%= render Avo::Views::ResourceNewComponent.new(resource: @resource, model: @model) %>

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

@@ -0,0 +1,3 @@
+<%= turbo_frame_start params[:turbo_frame] %>
+  <%= render Avo::Views::ResourceShowComponent.new(resource: @resource, reflection: @reflection) %>
+<%= turbo_frame_end params[:turbo_frame] %>

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

@@ -0,0 +1,16 @@
+<div>
+  <h3>Actions</h3>
+
+  <div class="mt-2" data-controller="hidden-input">
+    Avo actions allow you to perform specific tasks on one or more of your records. For example, you might want to mark a user as inactive and optionally send a message that may be customized by the person that wants to run the action.
+
+    <strong class="cursor-pointer block mt-2" data-action="click->hidden-input#showContent">Generate action 👇</strong>
+
+    <div class="mt-2 hidden" data-hidden-input-target="content">
+      <code class="text-lg">Toggle published</code>
+      <div>
+        <code class="p-1 rounded bg-light-blue-500 text-white">bin/rails generate avo:action toggle_published</code>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<div>
+  <h3>Documentation</h3>
+
+  <div class="mt-2">
+    We take pride in our documentation. Please check it out to see what you can build with Avo
+
+    <a href="https://docs.avohq.io" class="text-bold cursor-pointer block mt-2">Check out the docs 👉</a>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+<div>
+  <h3>Filters</h3>
+
+  <div class="mt-2" data-controller="hidden-input">
+    Filters allow you to better scope the index queries for records you are looking for.
+
+    <strong class="cursor-pointer block mt-2" data-action="click->hidden-input#showContent">Generate filter 👇</strong>
+
+    <div class="mt-2 hidden" data-hidden-input-target="content">
+      <code class="text-lg">Published filter</code>
+      <div>
+        <code class="p-1 rounded bg-light-blue-500 text-white">bin/rails generate avo:filter published_filter</code>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,28 @@
+<%
+  models = ApplicationRecord.descendants
+%>
+<div>
+  <h3>Resources</h3>
+
+  <div>The primary goal of Avo is to administer your database records. To do that Avo, uses the concept of a <strong>Resource</strong>. Each Avo <strong>Resource</strong> corresponds to a <strong>Rails Model</strong>.</div>
+
+  <% if models.present? %>
+    <div class="mt-2" data-controller="hidden-input">
+      It seems you already have <%= models.count %> <%= 'model'.pluralize models.count %> in your app. You can generate resources for each one with the following commands.
+
+      <strong class="cursor-pointer block mt-2" data-action="click->hidden-input#showContent">Generate resources 👇</strong>
+
+      <div class="mt-2 hidden" data-hidden-input-target="content">
+        <% models.each do |model| %>
+          <code class="text-lg"><%= model.to_s %></code>
+          <div>
+            <code class="p-1 rounded bg-light-blue-500 text-white">bin/rails generate avo:resource <%= model.to_s %></code>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% else %>
+
+  <% end %>
+</div>
+

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

@@ -1,3 +1,54 @@
-<transition name="fade">
-  <router-view :key="routerKey" />
-</transition>
+<div class="flex flex-col">
+  <%= panel title: 'Welcome to Avo' do |c| %>
+    <% c.with :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 %>
+      <div class="flex flex-col justify-between py-6 min-h-24">
+        <div class="px-6 space-y-4">
+          <h3>About</h3>
+
+          <p>
+            <strong>Avo</strong>'s mission is to make it easy for you to manage your content and build tools that are ready to deploy, all while using your favorite framework, Ruby on Rails.
+          </p>
+
+          <h3>Vision</h3>
+
+          <p>
+            We have big plans for Avo to make it the default starting point of your application. We'll be releasing features as soon as their ready.
+
+            <ul class="grid sm:grid-cols-2 max-w-168">
+              <li><span class="mr-2">👍</span> Built with Hotwire</li>
+              <li><span class="mr-2">👍</span> Resources</li>
+              <li><span class="mr-2">👍</span> Ordering</li>
+              <li><span class="mr-2">👍</span> Filters</li>
+              <li><span class="mr-2">👍</span> Actions</li>
+              <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> Custom tools</li>
+              <li><span class="mr-2">⏳</span> Custom fields</li>
+              <li><span class="mr-2">⏳</span> Search</li>
+              <li><span class="mr-2">🕐</span> Dashboards</li>
+              <li><span class="mr-2">🕐</span> Themes</li>
+            </ul>
+          </p>
+
+        </div>
+
+        <div class="px-6 mt-8">
+          <div class="space">
+            <%= render partial: 'resources' %>
+            <hr class="my-6">
+            <%= render partial: 'filters' %>
+            <hr class="my-6">
+            <%= render partial: 'actions' %>
+            <hr class="my-6">
+            <%= render partial: 'docs' %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,7 @@
+<% if (block = yield).empty? %>
+  <%= button_tag label, **args %>
+<% else %>
+  <%= button_tag **args do %>
+    <%= yield %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<% if (block = yield).empty? %>
+  <%= link_to label, url, **args %>
+<% else %>
+  <%= link_to url, **args do %>
+    <%= yield %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1 @@
+<div data-controller="alerts" data-alerts-target="container" data-alert-type="<%= type %>" class="hidden"><%= message %></div>

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

@@ -0,0 +1,3 @@
+<% flash.each do |type, message| %>
+  <%= render partial: 'avo/partials/alert', locals: {type: type.to_sym, message: message} %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<%
+  classes = 'absolute inset-auto left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2'
+  translation_tag = params[:related_name].present? ? 'avo.no_related_item_found' : 'avo.no_item_found'
+  label = t translation_tag, { item: resource_name }
+%>
+<div class="relative flex-1 py-12">
+  <div class="relative block text-gray-300 h-64 w-full">
+    <%= svg 'avocado', class: "#{classes} h-20 text-gray-400" %>
+    <%= svg 'code', class: "#{classes} h-8 -ml-20 -mt-12" %>
+    <%= svg 'fire', class: "#{classes} h-8 -ml-10 -mt-24" %>
+    <%= svg 'color-swatch', class: "#{classes} h-8 ml-8 -mt-24" %>
+    <%= svg 'globe', class: "#{classes} h-8 ml-20 -mt-12" %>
+    <%= svg 'library', class: "#{classes} h-8 -ml-20 mt-4" %>
+    <%= svg 'photograph', class: "#{classes} h-8 ml-20 mt-4" %>
+  </div>
+  <div class="relative block text-center text-lg text-gray-400 font-semibold -mt-10"><%= label %></div>
+</div>

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

@@ -0,0 +1,3 @@
+<%= javascript_tag nonce: true do %>
+  var timezone = '<%= Avo.configuration.timezone %>';
+<% end %>

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

@@ -0,0 +1,30 @@
+<%
+  # @todo: add avo styling to paginator
+  per_page_options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, @index_params[:per_page].to_i].sort.uniq
+%>
+
+<div class="bg-white px-4 flex items-center justify-between aborder-t aborder-blue-gray-200 sm:px-6 rounded-xl">
+  <div class="hidden sm:flex-2 sm:flex sm:items-center sm:justify-between">
+    <div>
+      <div class="text-sm leading-5 text-blue-gray-600 flex items-center">
+        <div class="mr-2"><%== pagy_info @pagy %></div>
+
+        <div data-controller="per-page">
+          <div class="flex items-center">
+            <%= select_tag 'per_page', options_for_select(per_page_options, @index_params[:per_page]), class: 'appearance-none inline-flex bg-blue-gray-100 disabled:bg-blue-gray-400 disabled:cursor-not-allowed focus:bg-white text-blue-gray-700 disabled:text-blue-gray-600 rounded-md py-1 px-2 leading-tight border border-blue-gray-300 outline-none focus:border-blue-gray-400 outline w-16 mr-1 text-sm', 'data-per-page-target': 'selector', 'data-action': 'change->per-page#reload' %> <%= t('avo.per_page').downcase %>
+          </div>
+
+          <% per_page_options.each do |option| %>
+            <%= link_to "Change to #{option} items per page", resources_path(@resource.model_class, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex">
+    <div class="flex-2 sm:flex sm:items-center sm:justify-between">
+      <%# @todo: add first & last page. make the first and last buttons rounded %>
+      <%== pagy_nav @pagy %>
+    </div>
+  </div>
+</div>