Use slots from single datepicker to wire up modal

frontend/src/app/core/state/days/day.service.ts

@@ -46,12 +46,6 @@ export class DayResourceService extends ResourceCollectionService<IDay> {
       .toPromise();
   }
 
-  public isNonWorkingDay(date:Date):boolean {
-    let isNonWorkingDay = false;
-    this.isNonWorkingDay$(date).subscribe((isNonWorking) => { isNonWorkingDay = isNonWorking; });
-    return isNonWorkingDay;
-  }
-
   requireNonWorkingYear$(date:Date|string):Observable<IDay[]> {
     const from = moment(date).startOf('year').format('YYYY-MM-DD');
     const to = moment(date).endOf('year').format('YYYY-MM-DD');

frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.html

@@ -11,8 +11,33 @@ class="op-non-working-days-list--add-button"
   <op-single-date-picker
     id="test"
     name="test"
-    [showIgnoreNonWorkingDays]="false"
+    [opened]="datepickerOpened"
     [name]="text.add_non_working_day"
-  ></op-single-date-picker>
+    (closed)="datepickerOpened = false"
+    (valueChange)="addNonWorkingDay($event)"
+  >
+    <spot-form-field
+      slot="extra-fields"
+      [required]="true"
+      [label]="text.non_working_day_name"
+    >
+      <spot-text-field
+        name="name"
+        slot="input"
+        [(ngModel)]="selectedNonWorkingDayName"
+        [showClearButton]="false"
+      ></spot-text-field>
+    </spot-form-field>
+
+    <button
+      slot="trigger"
+      type="button"
+      class="spot-link op-non-working-days-list--add-button"
+      (click)="datepickerOpened = true"
+    >
+      <span class="spot-icon spot-icon_add"></span>
+      <span [textContent]="text.add_non_working_day"></span>
+    </button>
+  </op-single-date-picker>
 </div>
 

frontend/src/app/shared/components/op-non-working-days-list/op-non-working-days-list.component.ts

@@ -34,7 +34,7 @@ export interface INonWorkingDay {
   id:string;
   name:string;
   date:string;
-  _destroy:boolean | null;
+  _destroy:boolean|null;
 }
 
 @Component({
@@ -61,6 +61,7 @@ export class OpNonWorkingDaysListComponent implements OnInit {
     change_button: this.I18n.t('js.admin.working_days.change_button'),
     change_title: this.I18n.t('js.admin.working_days.change_title'),
     removed_title: this.I18n.t('js.admin.working_days.removed_title'),
+    non_working_day_name: this.I18n.t('js.modals.label_name'),
   };
 
   form_submitted = false;
@@ -69,6 +70,10 @@ export class OpNonWorkingDaysListComponent implements OnInit {
 
   removedNonWorkingDays:string[] = [];
 
+  datepickerOpened = false;
+
+  selectedNonWorkingDayName:string = '';
+
   calendarOptions:CalendarOptions = {
     plugins: [listPlugin],
     initialView: 'listYear',
@@ -91,7 +96,11 @@ export class OpNonWorkingDaysListComponent implements OnInit {
 
       anchor.addEventListener('click', () => {
         // Create 4 hidden inputs(id, name, date, _destroy) for the deleted NWD
-        this.addRemovedNonWorkingdayInputs({ id: event.id, name: event.title, date: event.startStr } as unknown as INonWorkingDay);
+        this.addRemovedNonWorkingdayInputs({
+          id: event.id,
+          name: event.title,
+          date: event.startStr,
+        } as unknown as INonWorkingDay);
         event.remove();
       });
       td.appendChild(anchor);
@@ -168,7 +177,7 @@ export class OpNonWorkingDaysListComponent implements OnInit {
     fetchInfo:{ start:Date },
     successCallback:(events:EventInput[]) => void,
     failureCallback:(error:unknown) => void,
-  ):void | PromiseLike<EventInput[]> {
+  ):void|PromiseLike<EventInput[]> {
     this.dayService.requireNonWorkingYear$(fetchInfo.start)
       .subscribe(
         (days:IDay[]) => {
@@ -235,26 +244,28 @@ export class OpNonWorkingDaysListComponent implements OnInit {
     }
   }
 
-  public addNonWorkingDay():void {
+  public addNonWorkingDay(date:string):void {
+    const name = this.selectedNonWorkingDayName;
+    this.selectedNonWorkingDayName = '';
+
+    if (!date || date === '' || !name || name === '') {
+      return;
+    }
+
     // opens date picker modal
     // now I am just testing adding new event to the calendar, will be removed
-    const id = (Date.now()).toString();
-    const id2 = (Math.floor(Date.now() / 1000)).toString();
-    const eventId = `new${id}`;
-    const eventId2 = `new2${id2}`;
     const day = {
-      start: '2023-10-23', date: '2023-10-23', title: 'test4', name: 'test4', id: eventId,
-    } as unknown as INonWorkingDay;
-    const day2 = {
-      start: '2023-10-26', date: '2023-10-26', title: 'test5', name: 'test5', id: eventId2,
-    } as unknown as INonWorkingDay;
+      start: date,
+      name,
+      date,
+      title: name,
+      id: name,
+      _destroy: null,
+    } as INonWorkingDay;
 
     const api = this.ucCalendar.getApi();
     this.nonWorkingDays.push(day as unknown as IDay);
-    this.nonWorkingDays.push(day2 as unknown as IDay);
     api.addEvent({ ...day });
-    api.addEvent({ ...day2 });
     this.addNonWorkingdayInputs(day);
-    this.addNonWorkingdayInputs(day2);
   }
 }