Create button to nullify date_time fields (#2951)

Co-authored-by: Adrian Marin <adrian@adrianthedev.com>

app/components/avo/fields/date_time_field/edit_component.html.erb

@@ -1,5 +1,5 @@
 <%= field_wrapper **field_wrapper_args do %>
-  <%= content_tag :div, data: {
+  <%= content_tag :div, class: "flex relative", data: {
       controller: "date-field",
       date_field_view_value: @view,
       date_field_enable_time_value: true,
@@ -16,7 +16,7 @@
       value: @field.edit_formatted_value,
       class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
-        'date-field-target': 'input',
+        date_field_target: :input,
         placeholder: @field.placeholder,
         **@field.get_html(:data, view: view, element: :input)
       },
@@ -28,13 +28,24 @@
       value: @field.edit_formatted_value,
       class: classes("w-full"),
       data: {
-        'date-field-target': 'fakeInput',
+        date_field_target: :fakeInput,
         placeholder: @field.placeholder,
         **@field.get_html(:data, view: view, element: :input)
       },
       disabled: disabled?,
       placeholder: @field.placeholder,
       style: @field.get_html(:style, view: view, element: :input)
     %>
+    <%= content_tag :button,
+      class: "absolute right-0 self-center mr-4 uppercase font-semibold text-xs",
+      id: :reset,
+      type: :button,
+      title: t("avo.reset").capitalize,
+      data: {
+        action: "click->date-field#clear",
+        tippy: :tooltip
+      } do %>
+      <%= helpers.svg "avo/times", class: "h-4" %>
+    <% end %>
   <% end %>
 <% end %>

app/components/avo/fields/time_field/edit_component.html.erb

@@ -1,5 +1,5 @@
 <%= field_wrapper **field_wrapper_args do %>
-  <%= content_tag :div, data: {
+  <%= content_tag :div, class: "flex relative", data: {
       controller: "date-field",
       date_field_view_value: @view,
       date_field_enable_time_value: true,
@@ -16,7 +16,7 @@
       value: @field.edit_formatted_value,
       class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
-        'date-field-target': 'input',
+        date_field_target: :input,
         placeholder: @field.placeholder,
         **@field.get_html(:data, view: view, element: :input)
       },
@@ -28,13 +28,24 @@
       value: @field.edit_formatted_value,
       class: classes("w-full"),
       data: {
-        'date-field-target': 'fakeInput',
+        date_field_target: :fakeInput,
         placeholder: @field.placeholder,
         **@field.get_html(:data, view: view, element: :input)
       },
       disabled: disabled?,
       placeholder: @field.placeholder,
       style: @field.get_html(:style, view: view, element: :input)
     %>
+    <%= content_tag :button,
+      class: "absolute right-0 self-center mr-4 uppercase font-semibold text-xs",
+      id: :reset,
+      type: :button,
+      title: t("avo.reset").capitalize,
+      data: {
+        action: "click->date-field#clear",
+        tippy: :tooltip
+      } do %>
+      <%= helpers.svg "avo/times", class: "h-4" %>
+    <% end %>
   <% end %>
 <% end %>

app/javascript/js/controllers/fields/date_field_controller.js

@@ -230,4 +230,8 @@ export default class extends Controller {
   updateRealInput(value) {
     this.inputTarget.value = value
   }
+
+  clear() {
+    this.fakeInputTarget._flatpickr.clear();
+  }
 }

lib/generators/avo/templates/locales/avo.ar.yml

@@ -91,6 +91,7 @@ ar:
     prev_page: الصفحة السابقة
     records_selected_from_all_pages_html: جميع السجلات مختارة من جميع الصفحات
     remove_selection: إزالة التحديد
+    reset: اعاده تعيين
     reset_filters: إعادة تعيين الفلاتر
     resource_created: تم إنشاء السجل
     resource_destroyed: تم حذف السجل

lib/generators/avo/templates/locales/avo.en.yml

@@ -81,6 +81,7 @@ en:
     prev_page: Previous page
     records_selected_from_all_pages_html: All records selected from all pages
     remove_selection: Remove selection
+    reset: reset
     reset_filters: Reset filters
     resource_created: Record created
     resource_destroyed: Record destroyed

lib/generators/avo/templates/locales/avo.es.yml

@@ -83,6 +83,7 @@ es:
     prev_page: Página anterior
     records_selected_from_all_pages_html: Todos los registros seleccionados de todas las páginas.
     remove_selection: Quitar la selección
+    reset: restablecer
     reset_filters: Reiniciar filtros
     resource_created: Recurso creado
     resource_destroyed: Recurso eliminado

lib/generators/avo/templates/locales/avo.fr.yml

@@ -83,6 +83,7 @@ fr:
     prev_page: Page précédente
     records_selected_from_all_pages_html: tous les éléments sélectionnés de toutes les pages
     remove_selection: Supprimer la sélection
+    reset: réinitialiser
     reset_filters: Réinitialiser les filtres
     resource_created: Ressource créee
     resource_destroyed: Ressource détruite

lib/generators/avo/templates/locales/avo.ja.yml

@@ -83,6 +83,7 @@ ja:
     prev_page: 前のページ
     records_selected_from_all_pages_html: 全ページから選択された全レコード
     remove_selection: 選択を解除
+    reset: リセット
     reset_filters: フィルターをリセット
     resource_created: レコードが作成されました
     resource_destroyed: レコードが破棄されました

lib/generators/avo/templates/locales/avo.nb.yml

@@ -83,6 +83,7 @@ nb:
     prev_page: Forrige side
     records_selected_from_all_pages_html: Alle poster valgt fra alle sider
     remove_selection: Fjern valg
+    reset: nullstille
     reset_filters: Nullstill filter
     resource_created: Ressurs generert
     resource_destroyed: Ressurs slettet

lib/generators/avo/templates/locales/avo.nn.yml

@@ -83,6 +83,7 @@ nn:
     prev_page: Førre side
     records_selected_from_all_pages_html: Alle poster valgt fra alle sider
     remove_selection: Fjern val
+    reset: nullstille
     reset_filters: Nullstill filter
     resource_created: Ressurs generert
     resource_destroyed: Ressurs sletta

lib/generators/avo/templates/locales/avo.pt-BR.yml

@@ -83,6 +83,7 @@ pt-BR:
     prev_page: Página anterior
     records_selected_from_all_pages_html: Todos os registros de todas as páginas selecionados
     remove_selection: Remover seleção
+    reset: resetar
     reset_filters: Limpar filtros
     resource_created: Recurso criado
     resource_destroyed: Recurso destruído

lib/generators/avo/templates/locales/avo.pt.yml

@@ -83,6 +83,7 @@ pt:
     prev_page: Página anterior
     records_selected_from_all_pages_html: Todos os itens de todas as páginas selecionados
     remove_selection: Remover seleção
+    reset: restaurar
     reset_filters: Limpar filtros
     resource_created: Recurso criado
     resource_destroyed: Recurso destruído

lib/generators/avo/templates/locales/avo.ro.yml

@@ -85,6 +85,7 @@ ro:
     prev_page: Pagina anterioara
     records_selected_from_all_pages_html: Toate selectate din toate paginile
     remove_selection: Șterge selecția
+    reset: resetare
     reset_filters: Resetați filtrele
     resource_created: Resursă creata
     resource_destroyed: Resursă ștearsă

lib/generators/avo/templates/locales/avo.tr.yml

@@ -83,6 +83,7 @@ tr:
     prev_page: Önceki sayfa
     records_selected_from_all_pages_html: Tüm sayfalardan seçilen tüm kayıtlar
     remove_selection: Seçimi sil
+    reset: sıfırlama
     reset_filters: Filtreleri sıfırla
     resource_created: Kayıt oluşturuldu
     resource_destroyed: Kayıt silindi

spec/dummy/config/locales/avo.en.yml

@@ -84,6 +84,7 @@ en:
     records_selected_from_all_pages_html: All records selected from all pages
     remove_selection: Remove selection
     reset_filters: Reset filters
+    reset: reset
     resource_created: Record created
     resource_destroyed: Record destroyed
     resource_updated: Record updated

spec/system/avo/date_time_fields/date_time_spec.rb

@@ -66,6 +66,18 @@
 
           expect(show_field_value(id: :started_at)).to eq "January 02, 2000 17:17:17 Europe/Bucharest"
         end
+
+        it "resets the date when reset button is clicked" do
+          visit "/admin/resources/projects/#{project.id}/edit"
+
+          expect(text_input.value).to eq "2000-01-01 08:00:00"
+
+          click_button("reset")
+
+          save
+
+          expect(show_field_value(id: :started_at)).to eq "—"
+        end
       end
     end
   end

spec/system/avo/date_time_fields/time_spec.rb

@@ -59,6 +59,17 @@
 
         expect(find_field_value_element("starting_at").text).to eq "17:30"
       end
+
+      it "resets the time when reset button is clicked" do
+        visit "/admin/resources/courses/#{course.id}/edit"
+
+        expect(text_input.value).to eq "16:30"
+
+        click_button("reset")
+        save
+
+        expect(find_field_value_element("starting_at").text).to eq "—"
+      end
     end
   end