Merge remote-tracking branch 'origin/feature/42358-standardise-date-pickers-2' into 45001-component-to-show-the-list-of-non-working-days-of-year

frontend/src/app/shared/components/datepicker/single-date-picker/single-date-picker.component.html

@@ -1,16 +1,14 @@
 <spot-drop-modal
   [open]="opened"
-  (closed)="close()"
+  (closed)="opened = false"
 >
-  <button
+  <input
     slot="trigger"
-    type="button"
-    class="spot-link"
-    (click)="open()"
-  >
-    {{ value || text.date }}
-    <span class="spot-icon spot-icon_calendar"></span>
-  </button>
+    type="text"
+    class="spot-input"
+    (click)="onInputClick($event)"
+    [value]="value"
+  />
   
   <form
     slot="body"
@@ -23,6 +21,7 @@
     (submit)="save($event)"
   >
     <spot-selector-field
+      *ngIf="showIgnoreNonWorkingDays"
       [reverseLabel]="true"
       [label]="text.ignoreNonWorkingDays.title"
     >
@@ -35,6 +34,8 @@
       ></spot-switch>
     </spot-selector-field>
 
+    <ng-content select="[slot=extra-fields]"></ng-content>
+
     <spot-form-field
       [label]="text.date"
     >
@@ -61,7 +62,7 @@
       <div class="spot-action-bar--right">
         <button
           type="button"
-          (click)="close()"
+          (click)="opened = false"
           class="button spot-action-bar--action"
           data-qa-selector="op-datepicker-modal--action"
           [textContent]="text.cancel"

frontend/src/app/shared/components/datepicker/single-date-picker/single-date-picker.component.ts

@@ -35,6 +35,7 @@ import {
   forwardRef,
   Injector,
   Input,
+  OnInit,
   Output,
   ViewChild,
   ViewEncapsulation,
@@ -68,7 +69,9 @@ export const opSingleDatePickerSelector = 'op-single-date-picker';
     },
   ],
 })
-export class OpSingleDatePickerComponent implements ControlValueAccessor {
+export class OpSingleDatePickerComponent implements ControlValueAccessor, OnInit {
+  @Output('closed') closed = new EventEmitter();
+
   @Output('valueChange') valueChange = new EventEmitter();
 
   private _value = '';
@@ -90,7 +93,29 @@ export class OpSingleDatePickerComponent implements ControlValueAccessor {
 
   @Input() minimalDate:Date|null = null;
 
-  @Input() opened = false;
+  private _opened = false;
+
+  @Input() set opened(opened:boolean) {
+    if (this._opened === !!opened) {
+      return;
+    }
+
+    this._opened = !!opened;
+
+    if (this._opened) {
+      this.initializeDatepicker();
+    } else {
+      this.closed.emit();
+    }
+  }
+
+  get opened() {
+    return this.opened;
+  }
+
+  @Input() showIgnoreNonWorkingDays = true;
+
+  @Input() ignoreNonWorkingDays = false;
 
   @ViewChild('flatpickrTarget') flatpickrTarget:ElementRef;
 
@@ -98,8 +123,6 @@ export class OpSingleDatePickerComponent implements ControlValueAccessor {
 
   public workingDate:Date = new Date();
 
-  public ignoreNonWorkingDays = false;
-
   public datePickerInstance:DatePicker;
 
   text = {
@@ -123,13 +146,15 @@ export class OpSingleDatePickerComponent implements ControlValueAccessor {
     populateInputsFromDataset(this);
   }
 
-  open() {
-    this.opened = true;
-    this.initializeDatepicker();
+  ngOnInit(): void {
+    if (!this.value) {
+      const today = parseDate(new Date()) as Date;
+      this.writeValue(this.timezoneService.formattedISODate(today));
+    }
   }
 
-  close() {
-    this.opened = false;
+  onInputClick(event:MouseEvent) {
+    event.stopPropagation();
   }
 
   save($event:Event) {
@@ -137,7 +162,7 @@ export class OpSingleDatePickerComponent implements ControlValueAccessor {
     this.valueChange.emit(this.workingValue);
     this.onChange(this.workingValue);
     this.writeValue(this.workingValue);
-    this.close();
+    this.opened = false;
   }
 
   setToday():void {

frontend/src/app/spot/components/drop-modal/drop-modal.component.ts

@@ -40,7 +40,11 @@ export class SpotDropModalComponent implements OnDestroy {
   @Input('open')
   @HostBinding('class.spot-drop-modal_opened')
   set open(value:boolean) {
-    this._open = value;
+    if (this._open === !!value) {
+      return;
+    }
+
+    this._open = !!value;
 
     if (this._open) {
       /* We have to set these listeners next tick, because they're so far up the tree.
@@ -67,6 +71,8 @@ export class SpotDropModalComponent implements OnDestroy {
       document.body.removeEventListener('keydown', this.escapeListener);
       window.removeEventListener('resize', this.appHeightListener);
       window.removeEventListener('orientationchange', this.appHeightListener);
+      
+      console.log('close?', value);
 
       this.closed.emit();
     }

frontend/src/global_styles/content/_table.sass

@@ -62,6 +62,9 @@ $toolbar-height--mobile: 100px
   &.-with-footer
     padding-bottom: var(--generic-table--footer-height)
 
+  &_visible-overflow
+    overflow: visible
+
 .generic-table--results-container
   height:       100%
   overflow:

lib/tabular_form_builder.rb

@@ -82,6 +82,15 @@ class TabularFormBuilder < ActionView::Helpers::FormBuilder
     super
   end
 
+  def date_field(field, value, options = {})
+    angular_component_tag 'op-single-date-picker',
+                           class: 'date costs-date-picker',
+                           inputs: {
+                             id: field_id(field),
+                             name: field_name(field)
+                           }
+  end
+
   def radio_button(field, value, options = {}, *args)
     options[:class] = Array(options[:class]) + %w(form--radio-button)
 

modules/budgets/app/views/budgets/_form.html.erb

@@ -40,7 +40,15 @@ See COPYRIGHT and LICENSE files for more details.
                   resource: resource %>
 </div>
 <div class="form--field">
-  <%= f.text_field :fixed_date, container_class: '-xslim', class: '-augmented-datepicker' %>
+  <label class="form--label" for='budget_fixed_date'><%= WorkPackage.human_attribute_name(:fixed_date) %></label>
+  <div class="form--field-container -visible-overflow">
+  <%= angular_component_tag 'op-single-date-picker',
+                            inputs: {
+                              value: @budget.fixed_date,
+                              id: "budget_fixed_date",
+                              name: "budget[fixed_date]"
+                            }
+  %>
 </div>
 
 <%= render partial: 'budgets/subform/material_budget_subform' %>

modules/costs/app/views/cost_types/_rate.html.erb

@@ -50,10 +50,20 @@ See COPYRIGHT and LICENSE files for more details.
   <tr class="subform-row <%= classes %>" id="<%= id_prefix %>">
     <td>
       <label class="hidden-for-sighted" for="<%= "#{id_prefix}_valid_from" %>"><%= Rate.human_attribute_name(:valid_from) %></label>
-      <%= rate_form.text_field :valid_from,
-                               class: 'date costs-date-picker -augmented-datepicker',
+      <!--
+      <%= rate_form.date_field :valid_from,
+                               class: 'date costs-date-picker',
                                index: id_or_index,
                                required: templated ? false : true %>
+      -->
+      <%= angular_component_tag 'op-single-date-picker',
+                                class: 'date costs-date-picker',
+                                inputs: {
+                                  value: @fixed_date,
+                                  id: "#{id_prefix}_valid_from",
+                                  name: "cost_type[new_rate_attributes[0][valid_from]"
+                                }
+      %>
     </td>
     <td class="currency">
       <span class="inline-label">

modules/costs/app/views/cost_types/index.html.erb

@@ -44,7 +44,13 @@ See COPYRIGHT and LICENSE files for more details.
       <li class="simple-filters--filter">
         <%= styled_label_tag :fixed_date, t(:'attributes.fixed_date'), class: 'simple-filters--filter-name' %>
         <div class='simple-filters--filter-value'>
-          <%= styled_text_field_tag :fixed_date, @fixed_date, class: '-augmented-datepicker' %>
+          <%= angular_component_tag 'op-single-date-picker',
+                                    inputs: {
+                                      value: @fixed_date,
+                                      id: :start_date,
+                                      name: :fixed_date
+                                    }
+          %>
         </div>
       </li>
       <li class="simple-filters--filter">