monitor/entities/stakeholder.ts

@@ -29,6 +29,7 @@ export class Stakeholder {
   visibility: Visibility;
   creationDate: Date = null;
   updateDate: Date;
+  projectUpdateDate: Date;
   /** @warning Use pipe in HTML or StringUtils.getLogoUrl in components */
   logoUrl: string;
   isUpload: boolean = false;

sharedComponents/input/input.component.ts

@@ -23,6 +23,7 @@ import {properties} from "../../../../environments/environment";
 import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
 import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
 import {MobileDropdownComponent} from "../../utils/mobile-dropdown/mobile-dropdown.component";
+import {MatDatepicker} from "@angular/material/datepicker";
 
 export type InputType =
     'text'
@@ -33,7 +34,8 @@ export type InputType =
     | 'textarea'
     | 'select'
     | 'chips'
-    | 'year-range';
+    | 'year-range'
+    | 'date';
 
 export interface Option {
   icon?: string,
@@ -75,9 +77,9 @@ declare var UIkit;
       <div *ngIf="formControl" [id]="id">
           <div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
                [class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
-               [class.active]="!focused && (formAsControl?.value || selectable || formAsArray?.length > 0 || getLabel(formAsControl?.value) || yearRangeActive)"
+               [class.active]="!focused && (formAsControl?.value || selectable || type === 'date' || formAsArray?.length > 0 || getLabel(formAsControl?.value) || yearRangeActive)"
                [class.danger]="(formControl.invalid && (formControl.touched || !!searchControl?.touched)) || (!!searchControl?.invalid && !!searchControl?.touched)">
-              <div #inputBox class="input-box" [class.select]="selectable" click-outside-or-esc
+              <div #inputBox class="input-box" [class.select]="selectable || type ==='date'" click-outside-or-esc
                    [class.static]="placeholderInfo?.static" (clickOutside)="click($event)">
                   <div *ngIf="!placeholderInfo?.static && placeholderInfo?.label" class="placeholder">
                       <label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
@@ -163,8 +165,11 @@ declare var UIkit;
                                      maxlength="4" (click)="activeIndex = 1;$event.preventDefault()" [formControl]="getFormByName(yearRange.to.control)">
                           </div>
                       </ng-template>
-                      <div
+                      <ng-template [ngIf]="type === 'date'">
-                              *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
+                          <div *ngIf="!formAsControl.getRawValue()" class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{selectADate}}</div>
+                          <div *ngIf="formAsControl.getRawValue()" class="input uk-text-truncate" [class.uk-disabled]="formControl.disabled">{{formAsControl.getRawValue() | date: 'dd-MM-yyyy'}}</div>
+                      </ng-template>
+                      <div *ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable || type === 'date'"
                               class="uk-margin-small-left icon">
                           <icon *ngIf="formControl.disabled && disabledIcon" [name]="disabledIcon" [flex]="true"></icon>
                           <ng-template [ngIf]="formControl.enabled">
@@ -174,8 +179,10 @@ declare var UIkit;
                                       (click)="resetSearch($event)">
                                   <icon [flex]="true" name="close"></icon>
                               </button>
-                              <button *ngIf="(!focused && type === 'autocomplete' && !selectable) || (type !== 'autocomplete' && !searchControl?.value && !!formControl?.value && (searchable || !selectable))"
+                              <button *ngIf="(!focused && type === 'autocomplete' && !selectable) || 
-                                      class="uk-close uk-icon" (click)="resetValue($event)">
+                              (type !== 'autocomplete' && !searchControl?.value && !!formControl?.value && (searchable || !selectable)) ||
+                                (type === 'date' && formAsControl?.value)"
+                                      class="uk-close uk-icon" (click)="resetValue($event);">
                                   <icon [flex]="true" name="close"></icon>
                               </button>
                           </ng-template>
@@ -188,15 +195,18 @@ declare var UIkit;
                   </div>
               </div>
           </div>
+          <div *ngIf="!mobile && type === 'date' && opened" class="uk-dropdown" #calendarBox 
+               uk-dropdown="pos: bottom-left; mode: none; boundary-align: true;" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
+              <mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar>
+          </div>
           <div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox
-               uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
+               uk-dropdown="pos: bottom-justify; mode: none; boundary-align: true;" [attr.boundary]="'#' + id">
               <ul class="uk-nav uk-dropdown-nav">
                   <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
                       [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">
                       <a (click)="selectOption(option, $event)"
                          [class]="option.disabled ? 'uk-disabled uk-text-muted' : ''">
-              <span
+                        <span [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
-                      [attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
                       </a>
                   </li>
               </ul>
@@ -279,7 +289,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   /** Year Range Configuration */
   @Input() yearRange: YearRange;
   public activeIndex: 0 | 1 | null = null;
-
+  /** Date Configuration*/
+  @Input() selectADate: string = 'Select a date';
+  public selectedDate: Date;
   @Input() visibleRows: number = -1;
   @Input() extendEnter: () => void = null;
   @Output() focusEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
@@ -299,9 +311,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
   private subscriptions: any[] = [];
   @ViewChild('inputBox') inputBox: ElementRef;
   @ViewChild('optionBox') optionBox: ElementRef;
+  @ViewChild('calendarBox') calendarBox: ElementRef;
   @ViewChild('mobileDropdown') mobileDropdown: MobileDropdownComponent;
   @ViewChild('searchInput') searchInput: ElementRef;
   @ViewChildren('chip') chips: QueryList<ElementRef>;
+  @ViewChild('datepicker') datepicker: MatDatepicker<any>;
 
   @Input()
   set placeholder(placeholder: string | Placeholder) {
@@ -570,6 +584,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       let validator = this.formControl.validator({} as AbstractControl);
       this.required = (validator && validator.required);
     }
+    if(this.type === 'date') {
+      this.selectedDate = this.formAsControl.getRawValue()?new Date(this.formAsControl.getRawValue()):null;
+    }
     this.subscriptions.push(this.formControl.valueChanges.subscribe(value => {
       if (this.formControl.enabled) {
         if(this.type !== 'year-range') {
@@ -589,6 +606,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
               this.open(true);
             }
           }
+          if (this.type === 'date') {
+              this.selectedDate = value?new Date(value):null;
+          }
         }
         if ((this.value && value && this.value !== value) || (!this.value && value) || this.value && !value) {
           this.valueChange.emit(this.formControl.value);
@@ -737,7 +757,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
           this.searchInput.nativeElement.focus();
           this.activeElement.next(this.chips.last);
         }
-        if (this.selectArrow) {
+        if (this.selectArrow || this.datepicker) {
           this.open(!this.opened);
         } else if (this.type !== 'autocomplete' || this.showOptionsOnEmpty || !this.formControl.value) {
           this.open(true);
@@ -776,6 +796,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
         UIkit.dropdown(this.optionBox.nativeElement).hide();
         this.focused = false;
       }
+    } else if(this.calendarBox) {
+      if (this.opened) {
+        UIkit.dropdown(this.calendarBox.nativeElement).show();
+      } else {
+        UIkit.dropdown(this.calendarBox.nativeElement).hide();
+        this.focused = false;
+      }
     } else if(this.mobileDropdown) {
       if(this.opened) {
         this.mobileDropdown.open();
@@ -813,4 +840,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
       }
     }
   }
+
+  dateChanged(event: Date) {
+    this.focus(false);
+    this.formAsControl.setValue(event.getTime());
+  }
 }

sharedComponents/input/input.module.ts

@@ -1,10 +1,13 @@
 import {NgModule} from '@angular/core';
 import {InputComponent} from "./input.component";
-import {SharedModule} from "../../../openaireLibrary/shared/shared.module";
+import {SharedModule} from "../../shared/shared.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {SafeHtmlPipeModule} from "../../utils/pipes/safeHTMLPipe.module";
 import {ClickModule} from "../../utils/click/click.module";
 import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.module";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatNativeDateModule} from "@angular/material/core";
+import {MatInputModule} from "@angular/material/input";
 
 @NgModule({
   imports: [
@@ -12,7 +15,10 @@ import {MobileDropdownModule} from "../../utils/mobile-dropdown/mobile-dropdown.
     IconsModule,
     SafeHtmlPipeModule,
     ClickModule,
-    MobileDropdownModule
+    MobileDropdownModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatInputModule
   ],
   exports: [
     InputComponent