MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Stakeholder: Add projectUpdateDate. Input: Add date type.

This commit is contained in:
Konstantinos Triantafyllou 2023-07-19 19:51:54 +03:00
parent f9dcdd81cc
commit f7d8490e43
3 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
monitor/entities/stakeholder.ts
View File

@ -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;

60
sharedComponents/input/input.component.ts
View File

@ -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>
@ -90,8 +92,8 @@ declare var UIkit;
[class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[rows]="rows" [formControl]="formAsControl"></textarea>
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[rows]="rows" [formControl]="formAsControl"></textarea>
</ng-template>
<ng-template [ngIf]="type === 'select'">
<ng-container *ngIf="placeholderInfo?.static">
@ -163,8 +165,11 @@ declare var UIkit;
maxlength="4" (click)="activeIndex = 1;$event.preventDefault()" [formControl]="getFormByName(yearRange.to.control)">
</div>
</ng-template>
<div
*ngIf="(formControl.disabled && disabledIcon) || icon || (selectable && selectArrow) || type === 'autocomplete' || searchable"
<ng-template [ngIf]="type === 'date'">
<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))"
class="uk-close uk-icon" (click)="resetValue($event)">
<button *ngIf="(!focused && type === 'autocomplete' && !selectable) ||
(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
[attr.uk-tooltip]="(tooltip)?('title: ' + (option.tooltip ? option.tooltip : option.label) + '; delay: 500; pos:bottom-left'):null">{{option.label}}</span>
<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());
}
}

10
sharedComponents/input/input.module.ts
View File

@ -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