Rename new message draft form

app/components/new_message_component.html.erb

@@ -1,43 +1,77 @@
-<div class="w-full p-4 flex-col justify-start items-start gap-4 inline-flex">
-  <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
-    <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
-      <div class="grow shrink basis-0 text-gray-900 text-xl font-semibold leading-[35px]">Nová správa</div>
-    </div>
-    <%
-      sender_element_id = "sender"
-      template_element_id = "message_template"
-      recipient_name_element_id = "recipient_name"
-      recipient_id_element_id = "recipient_uri"
-    %>
-    <div class="self-stretch p-6 flex-col justify-start items-start flex">
-      <% if @boxes.count > 1 %>
-        <label for="sender" class="block mb-2 text-base font-medium text-gray-900">Odosielateľ</label>
-        <%= select_tag(sender_element_id, options_for_select(@boxes, [Current.box&.name, Current.box&.id]), required: true, prompt: "Zvoľte odosielateľa", class: "mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5") %>
-      <% else %>
-        <%= hidden_field sender_element_id, @boxes.first %>
-      <% end %>
+<div id="new_message" is="turbo-frame" class="w-full">
+  <div class="w-full p-4 flex-col justify-start items-start gap-4 inline-flex">
+    <div class="self-stretch bg-white rounded-md border border-gray-200 flex-col justify-start items-start flex">
+      <div class="self-stretch p-6 border-b border-gray-200 justify-start items-center gap-4 inline-flex">
+        <div class="grow shrink basis-0 text-gray-900 text-xl font-semibold leading-[35px]">Nová správa</div>
+      </div>
+      <%
+        form_id = "create_draft"
+        sender_element_id = "sender_id"
+        template_element_id = "message_template_id"
+      %>
 
-      <%= content_tag(:div, { "data-controller": "message-drafts", class: "w-full" }) do %>
-        <label for="<%= template_element_id %>" class="block mb-2 text-base font-medium text-gray-900">Typ správy</label>
-        <%= select_tag(template_element_id, options_for_select(@templates_list), required: true, prompt: "Zvoľte typ správy", "data-action": "change->message-drafts#loadTemplateRecipients", class: "mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5") %>
-      <% end %>
+      <%= form_with url: message_drafts_path, id: form_id, class: 'w-full' do |f| %>
+        <div class="self-stretch px-6 pt-6 flex-col justify-start items-start flex">
+          <div class="mb-4 w-full">
+            <% if @boxes.count > 1 %>
+              <label for="<%= sender_element_id %>" class="block mb-2 text-base font-medium text-gray-900">Odosielateľ</label>
+              <%= select_tag(sender_element_id, options_for_select(@boxes, ([Current.box&.name, Current.box&.id] if Current.box) || [@selected_box&.name, @selected_box&.id]), prompt: "Zvoľte odosielateľa", class: "text-sm rounded-lg block w-full p-2.5 #{@message.errors[:sender_name].any? && !@selected_box ? ERROR_CLASSES : DEFAULT_CLASSES}") %>
+              <% if @message.errors[:sender_name].any? && !@selected_box %>
+                <p class="mt-2 text-sm text-red-600 dark:text-red-500">
+                  <span class="font-medium"><%= @message.errors.full_messages_for(:sender_name).to_sentence %></span>
+                </p>
+              <% end %>
+            <% else %>
+              <%= hidden_field_tag sender_element_id, @boxes.first %>
+            <% end %>
+          </div>
 
-      <div id="recipients_list" is="turbo-frame" class="w-full"></div>
+          <%= content_tag(:div, { "data-controller": "message-drafts", class: "mb-4 w-full" }) do %>
+            <label for="<%= template_element_id %>" class="block mb-2 text-base font-medium text-gray-900">Typ správy</label>
+            <%= select_tag(template_element_id, options_for_select(@templates_list, [@selected_message_template&.name, @selected_message_template&.id]), prompt: "Zvoľte typ správy", "data-action": "change->message-drafts#loadTemplateRecipients", class: "text-sm rounded-lg block w-full p-2.5 #{@message.errors[:metadata].any? ? ERROR_CLASSES : DEFAULT_CLASSES}") %>
+            <% if @message.errors[:metadata].any? %>
+              <p class="mt-2 text-sm text-red-600 dark:text-red-500">
+                <span class="font-medium"><%= @message.errors[:metadata].to_sentence %></span>
+              </p>
+            <% end %>
+          <% end %>
 
-      <%= content_tag(:div, {
-        "data-controller": "message-drafts",
-        "data-message-drafts-submit-path": message_drafts_path,
-        "data-message-drafts-sender-element-id": sender_element_id,
-        "data-message-drafts-template-element-id": template_element_id,
-        "data-message-drafts-recipient-name-element-id": recipient_name_element_id,
-        "data-message-drafts-recipient-uri-element-id": recipient_id_element_id,
-        "data-message-drafts-authenticity-token": form_authenticity_token,
-        class: "gap-2 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200 w-full"
-      }) do %>
-        <button data-action="click->message-drafts#create" data-turbo-frame="false" class="flex justify-strech items-start self-stretch flex-grow-0 flex-shrink-0 gap-2 mt-6 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3.5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
-          Vytvoriť správu
-        </button>
+          <div id="selected_recipient" is="turbo-frame">
+            <%= hidden_field_tag 'recipient_name', params[:recipient_name] %>
+            <%= hidden_field_tag 'recipient_uri', params[:recipient_uri] %>
+          </div>
+        </div>
       <% end %>
+
+      <div class="self-stretch px-6 pb-6 flex-col justify-start items-start flex">
+        <div id="recipients_list" is="turbo-frame" class="w-full">
+          <% if @recipients_list && @recipients_list.count > 1 %>
+            <div>
+              <label for="recipient" class="block mb-2 text-base font-medium text-gray-900">Príjímateľ</label>
+            </div>
+            <%= button_to message_template_recipient_selector_path(@selected_message_template), method: 'get', data: { turbo_frame: "modal" }, class: "text-gray-500 hover:text-gray-900 w-full" do %>
+              <div id="recipient" class="text-sm rounded-lg block w-full p-2.5 <%= @message.errors[:recipient_name].any? ? ERROR_CLASSES : DEFAULT_CLASSES %>">
+                <p class="text-left"><%= params[:recipient_name].presence || 'Zvoľte príjemateľa' %></p>
+              </div>
+              <% if @message.errors[:recipient_name].any? %>
+                <p class="mt-2 text-left text-sm text-red-600 dark:text-red-500">
+                  <span class="font-medium"><%= @message.errors.full_messages_for(:recipient_name).to_sentence %></span>
+                </p>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <%= content_tag(:div, {
+          "data-controller": "message-drafts",
+          "data-message-drafts-form-id": form_id,
+          class: "gap-2 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200 w-full"
+        }) do %>
+          <button data-action="click->message-drafts#create" class="flex justify-strech items-start self-stretch flex-grow-0 flex-shrink-0 gap-2 mt-6 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3.5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+            Vytvoriť správu
+          </button>
+        <% end %>
+      </div>
     </div>
   </div>
 </div>

app/components/new_message_component.rb

@@ -1,6 +1,13 @@
 class NewMessageComponent < ViewComponent::Base
-  def initialize(templates_list:, boxes:)
+  DEFAULT_CLASSES = 'bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500'
+  ERROR_CLASSES = 'bg-red-50 border border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 focus:border-red-500'
+
+  def initialize(message:, templates_list:, boxes:, recipients_list: nil, selected_box: nil, selected_message_template: nil)
+    @message = message
     @templates_list = templates_list
     @boxes = boxes
+    @recipients_list = recipients_list
+    @selected_box = selected_box
+    @selected_message_template = selected_message_template
   end
 end

app/controllers/message_drafts_controller.rb

@@ -33,6 +33,15 @@ def create
       recipient_uri: new_message_draft_params[:recipient_uri]
     )
 
+    unless @message.valid?(:create)
+      @templates_list = MessageTemplate.tenant_templates_list(Current.tenant)
+      @boxes = Current.tenant.boxes.pluck(:name, :id)
+
+      @recipients_list = @message_template&.recipients&.pluck(:institution_name, :institution_uri)&.map { |name, uri| { uri: uri, name: name }}
+
+      render :update_new and return
+    end
+
     redirect_to message_thread_path(@message.thread)
   end
 

app/javascript/controllers/message_drafts_controller.js

@@ -10,36 +10,14 @@ export default class extends Controller {
   }
 
   async loadTemplateRecipients() {
-    const messageTemplateId = document.getElementById("message_template").value;
+    const messageTemplateId = document.getElementById("message_template_id").value;
     const templateRecipientsPath = `/message_templates/${messageTemplateId}/recipients_list`;
     await get(templateRecipientsPath, { responseKind: "turbo-stream" })
   }
 
   async create() {
-    const submitPath = this.data.get("submitPath");
-    const authenticityToken = this.data.get("authenticityToken");
-
-    const senderElementId = this.data.get("senderElementId");
-    const templateElementId = this.data.get("templateElementId");
-    const recipientNameElementId = this.data.get("recipientNameElementId");
-    const recipientUriElementId = this.data.get("recipientUriElementId");
-
-    await fetch(submitPath, {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      redirect: 'follow',
-      body: JSON.stringify({
-        authenticity_token: authenticityToken,
-        sender_id: document.getElementById(senderElementId).value,
-        message_template_id: document.getElementById(templateElementId).value,
-        recipient_name: document.getElementById(recipientNameElementId).value,
-        recipient_uri: document.getElementById(recipientUriElementId).value
-      })
-    }).then(response => {
-      if (response.redirected) {
-        window.location.href = response.url;
-      }
-    })
+    const formId = this.data.get("formId");
+    document.getElementById(formId).requestSubmit();
   }
 
   async update() {

app/models/message_draft.rb

@@ -39,6 +39,12 @@ class MessageDraft < Message
     end
   end
 
+  with_options on: :create do |message_draft|
+    message_draft.validates :sender_name, presence: true
+    message_draft.validates :recipient_name, presence: true
+    message_draft.validate :validate_metadata_with_template
+  end
+
   with_options on: :validate_data do |message_draft|
     message_draft.validates :uuid, format: { with: Utils::UUID_PATTERN }, allow_blank: false
     message_draft.validate :validate_metadata
@@ -161,6 +167,10 @@ def validate_metadata
     errors.add(:metadata, "Correlation ID must be UUID") unless all_message_metadata["correlation_id"]&.match?(Utils::UUID_PATTERN)
   end
 
+  def validate_metadata_with_template
+    errors.add(:metadata, :no_template) unless metadata&.dig("template_id").present?
+  end
+
   def validate_form
     forms = objects.select { |o| o.form? }
 

app/models/upvs/message_template.rb

@@ -47,17 +47,20 @@ def create_message(message, author:, box:, recipient_name:, recipient_uri:)
       status: 'created'
     }
 
-    message.thread = box.message_threads.find_or_create_by_merge_uuid!(
+    message.thread = box&.message_threads&.find_or_create_by_merge_uuid!(
       box: box,
       merge_uuid: message.metadata['correlation_id'],
       title: self.name,
       delivered_at: message.delivered_at
     )
 
-    message.save!
-    message.add_cascading_tag(author.draft_tag)
+    message.save
 
-    create_form_object(message)
+    if message.valid?(:create)
+      message.add_cascading_tag(author.draft_tag)
+
+      create_form_object(message)
+    end
   end
 
   def create_message_reply(message, original_message:, author:)

app/views/message_drafts/new.html.erb

@@ -1 +1,5 @@
-<%= render NewMessageComponent.new(templates_list: @templates_list, boxes: @boxes) %>
+<%= render NewMessageComponent.new(
+  message: @message,
+  templates_list: @templates_list,
+  boxes: @boxes)
+%>

app/views/message_drafts/update_new.turbo_stream.erb

@@ -0,0 +1,10 @@
+<%= turbo_stream.replace "new_message" do %>
+  <%= render NewMessageComponent.new(
+    message: @message,
+    templates_list: @templates_list,
+    boxes: @boxes,
+    recipients_list: @recipients_list,
+    selected_box: @box,
+    selected_message_template: @message_template
+  )%>
+<% end %>

app/views/message_templates/recipient_selected.turbo_stream.erb

@@ -1,13 +1,15 @@
+<%= turbo_stream.update "selected_recipient" do %>
+  <%= hidden_field_tag 'recipient_name', @recipient_name %>
+  <%= hidden_field_tag 'recipient_uri', @recipient_uri %>
+<% end %>
+
 <%= turbo_stream.update "recipients_list" do %>
   <div>
-    <label for="recipient" class="block mb-2 text-base font-medium text-gray-900">Príjemca</label>
+    <label for="recipient" class="block mb-2 text-base font-medium text-gray-900">Príjímateľ</label>
   </div>
 
-  <input id="recipient_uri" hidden value="<%= @recipient_uri %>">
-  <input id="recipient_name" hidden value="<%= @recipient_name %>">
-
   <%= button_to message_template_recipient_selector_path, method: :get, data: { turbo_frame: "modal" }, class: "text-gray-500 hover:text-gray-900 w-full" do %>
-    <div id="recipient" class="mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
+    <div id="recipient" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
       <p class="text-left"><%= @recipient_name %></p>
     </div>
   <% end %>

app/views/message_templates/recipient_selector.html.erb

@@ -1,3 +1,3 @@
-<%= tag.turbo_frame id: 'modal' do %>
+<%= tag.turbo_frame id: "modal" do %>
   <%= render MessageTemplateRecipientsComponent.new(recipients_list: @recipients_list) %>
 <% end %>

app/views/message_templates/recipients_list.turbo_stream.erb

@@ -1,15 +1,18 @@
-<%= turbo_stream.update "recipients_list" do %>
-  <% if @recipients_list.count > 1 %>
+<% if @recipients_list.count > 1 %>
+  <%= turbo_stream.update "recipients_list" do %>
     <div>
-      <label for="recipient" class="block mb-2 text-base font-medium text-gray-900">Príjemca</label>
+      <label for="recipient" class="block mb-2 text-base font-medium text-gray-900">Príjímateľ</label>
     </div>
+
     <%= button_to message_template_recipient_selector_path, method: :get, data: { turbo_frame: "modal" }, class: "text-gray-500 hover:text-gray-900 w-full" do %>
       <div id="recipient" class="mb-4 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
-        <p class="text-left">Zvoľte príjemcu</p>
+        <p class="text-left">Zvoľte príjímateľa</p>
       </div>
     <% end %>
-  <% else %>
-    <input id="recipient_name" hidden value="<%= @recipients_list.first[:name] %>">
-    <input id="recipient_uri" hidden value="<%= @recipients_list.first[:uri] %>">
+  <% end %>
+<% else %>
+  <%= turbo_stream.update "selected_recipient" do %>
+    <%= hidden_field_tag 'recipient_name', @recipients_list.first[:name] %>
+    <%= hidden_field_tag 'recipient_uri', @recipients_list.first[:uri] %>
   <% end %>
 <% end %>

config/locales/sk.yml

@@ -1,6 +1,9 @@
 sk:
   activerecord:
     attributes:
+      message:
+        sender_name: 'Odosielateľ'
+        recipient_name: 'Prijímateľ'
       message_thread:
         title: "Názov"
     errors:
@@ -13,6 +16,10 @@ sk:
             base:
               restrict_dependent_destroy:
                 has_many: "Štítok je použitý v automatizačných pravidlách, nie je ho možné vymazať. Upravte najskôr pravidlá"
+        message_draft:
+          attributes:
+            metadata:
+              no_template: "Typ správy je povinná položka"
   date:
     abbr_day_names:
       - Ne