add support for color english wbw translation

Author: naveed-ahmad

app/admin/content/resource_content.rb

@@ -427,7 +427,11 @@
   sidebar 'Data for this resource', only: :show do
     div do
       if resource.translation?
-        link_to 'Translations', "/cms/translations?q%5Bresource_content_id_eq=#{resource.id}"
+        if resource.one_word?
+          link_to 'WBW Translations', "/cms/word_translations?q%5Bresource_content_id_eq=#{resource.id}"
+        else
+          link_to 'Translations', "/cms/translations?q%5Bresource_content_id_eq=#{resource.id}"
+        end
       elsif resource.tafsir?
         link_to 'Tafsir', "/cms/tafsirs?q%5Bresource_content_id_eq=#{resource.id}"
       elsif resource.transliteration?

app/admin/quran/word.rb

@@ -532,7 +532,7 @@ def scoped_collection
           tr do
             td link_to(trans.id, [:cms, trans])
             td link_to(trans.language_name, cms_language_path(trans.language_id)) if trans.language_id
-            td trans.text
+            td safe_html(trans.text)
           end
         end
       end

app/admin/word_translation.rb

@@ -21,7 +21,9 @@
 
     column :language, &:language_name
     column :word
-    column :text
+    column :text do |r|
+      safe_html r.text
+    end
     actions
   end
 
@@ -32,10 +34,13 @@
       row :language
       row :text do |resource|
         div class: resource.language_name.to_s.downcase do
-          resource.text
+          safe_html resource.text
         end
       end
-      row :resource_content
+      row :resource_content do |resource|
+        resource_content = resource.get_resource_content
+        link_to resource_content.name, [:cms, resource_content]
+      end
       row :created_at
       row :updated_at
     end

app/assets/stylesheets/shared/content.scss

@@ -10,6 +10,10 @@ body {
   direction: rtl;
 }
 
+.english{
+  direction: ltr;
+}
+
 .saw {
   color: #FF00CC;
 }

app/assets/stylesheets/shared/corpus.scss

@@ -145,10 +145,11 @@
   color: #d8019c;
 }
 
-.silver {
+.silver, .paren {
   color: #b4b4b4;
 }
 
-.silver-light {
+// punctuation, brackets
+.silver-light, .punc {
   color: #bebebe;
-}
+}

app/jobs/draft_content/approve_draft_word_translation_job.rb

@@ -5,9 +5,12 @@ class ApproveDraftWordTranslationJob < ApproveDraftContentJob
     private
 
     def import_from_legacy_table
-      Draft::WordTranslation.includes(:word)
-                            .where(resource_content_id: @resource.id)
-                            .find_each { |draft| import_word(draft) }
+      Draft::WordTranslation
+        .includes(:word)
+        .where(resource_content_id: @resource.id)
+        .find_each do |draft|
+          import_word(draft)
+        end
     end
 
     def import_from_draft_content
@@ -22,6 +25,7 @@ def import_from_draft_content
 
     def import_word(draft)
       word = draft.word
+
       translation = WordTranslation.where(
         word_id: word.id,
         resource_content_id: @resource.id

app/models/word.rb

@@ -144,6 +144,12 @@ class Word < QuranApiRecord
   default_scope { order 'position asc' }
   alias_attribute :code_v4, :code_v2
 
+  def grammar_segmented_text
+    morphology_word_segments.map do |seg|
+      "<span class='#{seg.get_segment_color}'>#{seg.text_uthmani}</span>"
+    end.join
+  end
+
   def self.ransackable_scopes(*)
     %i[letters_cont starts_with_eq ends_with_eq]
   end

app/views/resources/previews/_word_translation.html.erb

@@ -7,6 +7,7 @@
     .order('words.position ASC')
 
   language_name = word_translations.first&.language_name.to_s.downcase
+  is_colored = resource.name.include?('color')
 %>
 
 <div class="tw-mt-5" data-controller="tabs">
@@ -79,10 +80,14 @@
               <% word_translations.each do |wt| %>
                 <div class="tw-bg-gray-50 tw-p-2 tw-rounded-lg tw-border tw-border-gray-200 tw-text-center tw-min-w-[5rem]">
                   <div class="tw-text-lg tw-text-gray-800 qpc-hafs tw-mb-2 tw-p-2">
-                    <%= wt.word.text_qpc_hafs %>
+                    <% if is_colored %>
+                      <%= safe_html wt.word.text_qpc_hafs %>
+                    <% else %>
+                      <%= safe_html wt.word.grammar_segmented_text %>
+                    <% end %>
                   </div>
                   <div class="tw-text-sm tw-text-gray-600 <%= language_name %>">
-                    <%= wt.text %>
+                    <%= safe_html wt.text %>
                   </div>
                 </div>
               <% end %>