Use correct translation scopes and add missing filtered route

virolea · Sep 13, 2024 · 3537c40 · 3537c40
1 parent 1e52ed5
commit 3537c40
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 22 deletions.
diff --git a/app/assets/builds/rosetta/application.css b/app/assets/builds/rosetta/application.css
diff --git a/app/controllers/rosetta/locales/translations/missing_controller.rb b/app/controllers/rosetta/locales/translations/missing_controller.rb
@@ -0,0 +1,9 @@
+module Rosetta
+  class Locales::Translations::MissingController < Locales::TranslationsController
+    private
+
+    def scope
+      TranslationKey.with_missing_translation_in_locale(@locale)
+    end
+  end
+end
diff --git a/app/controllers/rosetta/locales/translations_controller.rb b/app/controllers/rosetta/locales/translations_controller.rb
@@ -3,15 +3,17 @@ class Locales::TranslationsController < ApplicationController
     before_action :set_locale
 
     def index
-      @pagy, @translation_keys = pagy(TranslationKey
-        .includes(:translations)
-        .joins("LEFT JOIN rosetta_translations ON rosetta_translations.translation_key_id = rosetta_translation_keys.id AND rosetta_translations.locale_id = #{@locale.id}")
-        .order(created_at: :desc)
-      )
+      @pagy, @translations = pagy(scope)
+
+      render "rosetta/locales/translations/index"
     end
 
     private
 
+    def scope
+      TranslationKey.all_in_locale(@locale)
+    end
+
     def set_locale
       @locale = Locale.find_by!(code: params[:locale_id])
     end

diff --git a/app/helpers/rosetta/application_helper.rb b/app/helpers/rosetta/application_helper.rb
@@ -1,6 +1,7 @@
 module Rosetta
   module ApplicationHelper
-    include DialogHelper
     include Pagy::Frontend
+    include DialogHelper
+    include NavigationHelper
   end
 end
diff --git a/app/helpers/rosetta/navigation_helper.rb b/app/helpers/rosetta/navigation_helper.rb
@@ -0,0 +1,21 @@
+module Rosetta
+  module NavigationHelper
+    def tab_link_to(name = nil, options = nil, html_options = nil, &block)
+      is_current_page = current_page?(block_given? ? name : options)
+
+      css_classes = class_names(
+        "flex group whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
+        "active border-indigo-500 text-indigo-600": is_current_page,
+        "border-transparent text-gray-500 hover:border-gray-200 hover:text-gray-700": !is_current_page
+      )
+
+      html_options = { class: css_classes, aria: { current: "page" } }
+
+      if block_given?
+        link_to(name, html_options, &block)
+      else
+        link_to(name, options, html_options)
+      end
+    end
+  end
+end
diff --git a/app/views/layouts/rosetta/_dialog.html.erb b/app/views/layouts/rosetta/_dialog.html.erb
@@ -13,7 +13,12 @@
 
     <div class="p-4">
       <%= turbo_frame_tag "dialog_content", data: { dialog_target: "turboFrame" } do %>
-        <%= yield %>
+        <div class="flex justify-around py-12">
+          <svg class="animate-spin h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
       <% end %>
     </div>
   </div>

diff --git a/app/views/layouts/rosetta/application.html.erb b/app/views/layouts/rosetta/application.html.erb
@@ -19,13 +19,6 @@
     </main>
   </div>
 
-  <%= render "layouts/rosetta/dialog" do %>
-    <div class="flex justify-around py-12">
-      <svg class="animate-spin h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-      </svg>
-    </div>
-  <% end %>
+  <%= render "layouts/rosetta/dialog" %>
 </body>
 </html>
diff --git a/app/views/rosetta/locales/translations/_navigation.html.erb b/app/views/rosetta/locales/translations/_navigation.html.erb
@@ -0,0 +1,16 @@
+<div class="mt-6">
+  <div class="border-b border-gray-200 flex justify-between items-center">
+    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
+      <%= tab_link_to "All", locale_translations_path(@locale) %>
+
+      <%= tab_link_to locale_translations_missing_index_path(@locale) do %>
+        Missing
+        <span class="ml-3 hidden md:inline-block rounded-full px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-900 group-[.active]:bg-indigo-100 group-[.active]:text-indigo-600">
+          <%= Rosetta::TranslationKey.with_missing_translation_in_locale(@locale).size %>
+        </span>
+      <% end %>
+    </nav>
+
+    <input type="text" placeholder="Search translations" class="input w-60">
+  </div>
+</div>
diff --git a/...es/translations/_translation_key.html.erb → ...translation_key_with_translation.html.erb b/...es/translations/_translation_key.html.erb → ...translation_key_with_translation.html.erb
@@ -1,13 +1,13 @@
 <tr class="divide-x divide-gray-200">
   <td class="py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6">
-    <%= translation_key.value %>
+    <%= translation_key_with_translation.value %>
   </td>
   <td class="px-3 py-4 text-sm text-gray-900 group relative">
-    <%= turbo_frame_tag dom_id(translation_key) do %>
-      <%= translation_key.translations[0]&.value %>
+    <%= turbo_frame_tag dom_id(translation_key_with_translation) do %>
+      <%= translation_key_with_translation.translation_value %>
 
       <div class="hidden group-hover:flex absolute w-full h-full top-0 left-0 bg-indigo-50 bg-opacity-50 pr-4  items-center justify-end">
-        <%= link_to "edit", edit_translation_key_translation_path(translation_key, locale_id: @locale.id), class: "text-indigo-600 hover:text-indigo-900 font-medium" %>
+        <%= link_to "edit", edit_translation_key_translation_path(translation_key_with_translation, locale_id: @locale.id), class: "text-indigo-600 hover:text-indigo-900 font-medium" %>
       </div>
     <% end %>
   </td>

diff --git a/app/views/rosetta/locales/translations/index.html.erb b/app/views/rosetta/locales/translations/index.html.erb
@@ -24,7 +24,9 @@
   </div>
 </div>
 
-<div class="mt-8">
+<%= render "rosetta/locales/translations/navigation" %>
+
+<div class="mt-4">
   <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
     <table class="min-w-full divide-y divide-gray-300">
       <thead class="bg-gray-50">
@@ -35,7 +37,10 @@
       </thead>
 
       <tbody class="divide-y divide-gray-200 bg-white">
-        <%= render collection: @translation_keys, partial: "rosetta/locales/translations/translation_key" %>
+        <%= render(
+          collection: @translations,
+          as: :translation_key_with_translation,
+          partial: "rosetta/locales/translations/translation_key_with_translation") %>
       </tbody>
     </table>
   </div>

diff --git a/config/routes.rb b/config/routes.rb
@@ -4,6 +4,10 @@
   resources :locales do
     scope module: :locales do
       resources :translations, only: :index
+
+      namespace :translations do
+        resources :missing, only: :index
+      end
     end
   end