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

1. Notify Form: Change view of form base on new redesign. 2. Input: Add a new type autocomplete_soft in order to use it in search. 3.Search Input: Add options for autocomplete. 4. Change some dashboard-inputs to inputs

This commit is contained in:
Konstantinos Triantafyllou 2022-04-11 12:27:10 +03:00
parent 41d5926be3
commit 337a56ec75
11 changed files with 91 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dashboard/divId/divIds.component.html
View File

@ -95,14 +95,9 @@
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)">
<form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="classForm.get('name')"
type="text" label="Class Name" placeholder="Write a name">
</div>
<div dashboard-input [formInput]="classForm.get('pages')" placeholder="Add a page"
type="chips" [options]="allPages" label="Pages">
</div>
<div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
[formInput]="classForm.get('portalType')" [options]="portalUtils.portalTypes"></div>
<div input [formInput]="classForm.get('name')" placeholder="Class Name"></div>
<div input [formInput]="classForm.get('pages')" placeholder="Pages" [options]="allPages" type="chips"></div>
<div input [formInput]="classForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div>
</form>
</modal-alert>
<modal-alert #deleteModal (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>

9
dashboard/divhelpcontent/class-help-content-form.component.html
View File

@ -44,15 +44,8 @@
</div>
<form [formGroup]="myForm" [class.hidden]="showLoading">
<div class="uk-grid uk-child-width-1-2 ">
<div *ngIf="classOptions.length > 0" dashboard-input
[formInput]="myForm.get('divId')"
type="select" placeholder="Select Class"
label="Select Class" [options]="classOptions"
>
</div>
<div *ngIf="classOptions.length > 0" input [formInput]="myForm.get('divId')" placeholder="Select Class" [options]="classOptions" type="select"></div>
</div>
<div class="form-group uk-margin-top">
<span class="uk-text-bold uk-margin-small-right">Select Status (Enable/ disable)</span>

10
dashboard/entity/entities.component.html
View File

@ -113,14 +113,8 @@
<modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)">
<form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="entityForm.get('name')"
type="text" placeholder="Write a name"
label="Entity Name">
</div>
<div dashboard-input [formInput]="entityForm.get('pid')"
type="text" placeholder="Write a pid"
label="Entity Pid">
</div>
<div input [formInput]="entityForm.get('name')" placeholder="Entity Name"></div>
<div input [formInput]="entityForm.get('pid')" placeholder="Entity Pid"></div>
</form>
</modal-alert>
<modal-alert #relatedPages (alertOutput)="continueToggling($event)"></modal-alert>

14
dashboard/helpTexts/page-help-content-form.component.html
View File

@ -40,18 +40,10 @@
</div>
<form [formGroup]="myForm" [class.hidden]="showLoading">
<div class="uk-grid uk-child-width-1-2 ">
<div *ngIf="placementsOptions.length > 0" dashboard-input
[formInput]="myForm.get('placement')"
type="select" placeholder="Select placement"
label="Select placement" [options]="placementsOptions"
>
</div>
<div dashboard-input [formInput]="myForm.get('order')"
type="select" placeholder="Select order"
label="Select order" [options]="orderOptions">
</div>
<div *ngIf="placementsOptions.length > 0" input [formInput]="myForm.get('placement')"
placeholder="Select placement" [options]="placementsOptions" type="select"></div>
<div input [formInput]="myForm.get('order')" placeholder="Select order" [options]="orderOptions" type="select"></div>
</div>
<div class="form-group uk-margin-top">
<div class="uk-text-bold uk-margin-medium-bottom">Select Status (Enable/ disable)</div>
<mat-slide-toggle [checked]="myForm.get('isActive').value"

24
dashboard/portal/portals.component.html
View File

@ -86,27 +86,15 @@
</ng-container>
</div>
</div>
<modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)"
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)">
<form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="portalForm.get('name')" type="text" label="Portal Name"
placeholder="Write a name">
</div>
<div dashboard-input type="select" label="Portal Type" placeholder="Choose a type"
[formInput]="portalForm.get('type')" [options]="portalUtils.portalTypes"></div>
<div dashboard-input [formInput]="portalForm.get('pid')"
type="text" placeholder="Write pid of portal"
label="Portal persistent id for portal">
</div>
<div dashboard-input [formInput]="portalForm.get('piwik')"
type="text" placeholder="Write piwik id of portal"
label="Piwik id">
</div>
<div *ngIf="properties.environment == 'development'" dashboard-input [formInput]="portalForm.get('twitterAccount')" type="text"
placeholder="Write twitter account of portal" label="Twitter Account">
</div>
<input type="hidden" formControlName="_id">
<div input [formInput]="portalForm.get('name')" placeholder="Portal Name"></div>
<div input [formInput]="portalForm.get('type')" placeholder="Portal Type"
[options]="portalUtils.portalTypes" type="select"></div>
<div input [formInput]="portalForm.get('pid')" placeholder="Portal persistent id for portal"></div>
<div input [formInput]="portalForm.get('piwik')" placeholder="Piwik ID"></div>
<div *ngIf="properties.environment == 'development'" input [formInput]="portalForm.get('twitterAccount')" placeholder="Twitter Account"></div>
</form>
</modal-alert>

14
notifications/notify-form/notify-form.component.css Normal file
View File

@ -0,0 +1,14 @@
[notify-form] .notification-user {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
z-index: 1;
}
[notify-form] .input-wrapper.recipients {
--input-padding-horizontal: 0;
--input-font-size: 14px;
--input-placeholder-weight: 700;
--input-placeholder-color: var(--grey-color);
}

48
notifications/notify-form/notify-form.component.ts
View File

@ -1,12 +1,11 @@
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";
import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from "@angular/core";
import {FormArray, FormBuilder, FormGroup} from "@angular/forms";
import {User} from "../../login/utils/helper.class";
import {UserManagementService} from "../../services/user-management.service";
import {of, Subscription} from "rxjs";
import {Subscription} from "rxjs";
import {NotificationService} from "../notification.service";
import {Notification} from "../notifications";
import {InputComponent, Option} from "../../sharedComponents/input/input.component";
import {properties} from "../../../../environments/environment";
declare var UIkit;
@ -15,14 +14,12 @@ declare var UIkit;
template: `
<form *ngIf="user && form" [formGroup]="form">
<ng-template [ngIf]="form.get('notify')">
<mat-checkbox formControlName="notify" class="uk-text-small">{{label}}</mat-checkbox>
<div [class.uk-hidden]="!form.get('notify').value" class="uk-grid uk-grid-small uk-margin-top" uk-grid>
<div>
<label><input name="notify" type="checkbox" class="uk-checkbox" formControlName="notify"> {{label}}</label>
<div [class.uk-hidden]="!form.get('notify').value" class="uk-position-relative uk-margin-medium-top">
<div class="notification-user">
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
</div>
<div dashboard-input [formInput]="form.get('message')"
rows="3" placeholder="Send a notification"
type="textarea" class="uk-width-expand"></div>
<div input [rows]="4" [formInput]="form.get('message')" placeholder="Send a notification" type="textarea"></div>
</div>
</ng-template>
<ng-template [ngIf]="form.get('groups') && availableGroups">
@ -36,30 +33,27 @@ declare var UIkit;
</span>
</div>
</div>-->
<div class="uk-grid uk-grid-small uk-margin-top" uk-grid>
<div>
<div #recipients input type="chips" [options]="availableGroups" [showOptionsOnEmpty]="false"
placeholder="Sent to:" hint="Add a recipient" inputClass="recipients" [formInput]="form.get('groups')">
</div>
<div class="uk-position-relative uk-margin-medium-top">
<div class="notification-user">
<notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>
</div>
<div class="uk-width-expand">
<div #recipients dashboard-input type="chips" [options]="availableGroups" [showOptionsOnEmpty]="false"
class="uk-width-expand" (focusEmitter)="onFocus($event)" placeholder="Sent to" inputClass="none"
[formInput]="form.get('groups')">
</div>
<div dashboard-input [formInput]="form.get('message')"
[rows]="4" placeholder="Write a notification"
type="textarea" class="uk-margin-top" inputClass="flat">
<div tools class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
<button *ngIf="!sending && message" (click)="sendNotification()"
class="uk-button uk-button-small uk-button-secondary">Send</button>
<button *ngIf="sending || !message" (click)="sendNotification()"
class="uk-button uk-button-small uk-button-secondary" disabled>Send</button>
</div>
<div input [formInput]="form.get('message')"
[rows]="4" placeholder="Send a notification"
type="textarea" inputClass="flat">
<div tools class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">
<button (click)="sendNotification()" class="uk-button uk-button-small uk-button-primary"
[class.uk-disabled]="sending || !message" [disabled]="sending || !message">Send</button>
</div>
</div>
</div>
</ng-template>
</form>
`
`,
styleUrls: ['notify-form.component.css'],
encapsulation: ViewEncapsulation.None
})
export class NotifyFormComponent implements OnInit, OnDestroy {
@Input()

8
role-verification/role-verification.component.ts
View File

@ -21,7 +21,7 @@ import {Composer} from "../utils/email/composer";
email, to accept the invitation request.
</div>
<div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-center">
<div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code">
<div input [formInput]="code" class="uk-width-medium" placeholder="Verification code">
<span *ngIf="error" error>{{error}}</span>
</div>
</div>
@ -32,7 +32,7 @@ import {Composer} from "../utils/email/composer";
<button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
(click)="cancel(managerModal)">Cancel
</button>
<button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
<button class="uk-button" [class.uk-button-primary]="code.valid" [class.uk-disabled]="code.invalid || loading"
(click)="verifyManager()">Accept
</button>
</div>
@ -46,7 +46,7 @@ import {Composer} from "../utils/email/composer";
email, to accept the invitation request.
</div>
<div *ngIf="!loading" class="uk-margin-medium-top uk-flex uk-flex-wrap uk-flex-center">
<div dashboard-input [formInput]="code" class="uk-width-medium" placeholder="Write verification code">
<div input [formInput]="code" class="uk-width-medium" placeholder="Verification code">
<span *ngIf="error" error>{{error}}</span>
</div>
</div>
@ -57,7 +57,7 @@ import {Composer} from "../utils/email/composer";
<button class="uk-button uk-button-default uk-margin-medium-right" [class.uk-disabled]="loading"
(click)="cancel(memberModal)">Cancel
</button>
<button class="uk-button" [class.portal-button]="code.valid" [class.uk-disabled]="code.invalid || loading"
<button class="uk-button" [class.uk-button-primary]="code.valid" [class.uk-disabled]="code.invalid || loading"
(click)="verifyMember()">Accept
</button>
</div>

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

@ -18,7 +18,7 @@ import {Subscription} from "rxjs";
import {EnvProperties} from "../../utils/properties/env-properties";
import {properties} from "../../../../environments/environment";
export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'textarea' | 'select' | 'chips';
export type InputType = 'text' | 'URL' | 'logoURL' | 'autocomplete' | 'autocomplete_soft' | 'textarea' | 'select' | 'chips';
export interface Option {
icon?: string,
@ -37,6 +37,9 @@ declare var UIkit;
/**
* WARNING! dashboard-input selector is @deprecated, use input instead
*
* Autocomplete soft allows values that are not listed in options list. In order to work as expected
* avoid providing options with different label and value.
*
* */
@Component({
selector: '[dashboard-input], [input]',
@ -47,42 +50,49 @@ declare var UIkit;
[class.active]="(formAsControl?.value || formAsArray?.length > 0 || getLabel(formAsControl?.value)) && !focused"
[class.danger]="(formControl.invalid && (formControl.touched || searchControl?.touched)) || (searchControl?.invalid && searchControl?.touched)">
<div #inputBox class="input-box" [class.select]="type === 'select'"
[class.static]="placeholderInfo.static">
<div *ngIf="!placeholderInfo.static && placeholderInfo.label" class="placeholder">
[class.static]="placeholderInfo?.static">
<div *ngIf="!placeholderInfo?.static && placeholderInfo.label" class="placeholder">
<label>{{placeholderInfo.label}} <sup *ngIf="required">*</sup></label>
</div>
<div class="uk-flex" [class.uk-flex-middle]="type !== 'textarea'">
<ng-template [ngIf]="type === 'text' || type === 'URL' || type === 'logoURL'">
<input #input class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'textarea'">
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
<textarea #textArea class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[rows]="rows" [formControl]="formAsControl"></textarea>
</ng-template>
<ng-template [ngIf]="type === 'select'">
<div *ngIf="formControl.value || !placeholderInfo.static" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="!formControl.value && placeholderInfo.static" class="input placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
<div *ngIf="formControl.value || !placeholderInfo?.static" class="input uk-text-truncate">{{getLabel(formControl.value)}}</div>
<div *ngIf="!formControl.value && placeholderInfo?.static" class="input placeholder uk-text-truncate">{{placeholderInfo.label}}</div>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete'">
<input *ngIf="focused" [attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
<input *ngIf="focused" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
#searchInput class="input" [formControl]="searchControl" [class.uk-text-truncate]="!focused">
<div *ngIf="!focused" class="input">{{getLabel(formAsControl.value)}}</div>
</ng-template>
<ng-template [ngIf]="type === 'autocomplete_soft'">
<input #input class="input" [attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="formAsControl" [class.uk-text-truncate]="!focused">
</ng-template>
<ng-template [ngIf]="type === 'chips'">
<div class="uk-grid uk-grid-small uk-grid-row-collapse uk-width-expand" uk-grid>
<div *ngFor="let chip of formAsArray.controls; let i=index" class="chip">
<div *ngFor="let chip of formAsArray.controls; let i=index" [class.hidden]="!focused && i > 0" class="chip">
<div class="uk-label uk-flex uk-flex-middle">
<span class="uk-text-truncate uk-width-expand">{{getLabel(chip.value)}}</span>
<icon (click)="remove(i, $event)" class="uk-link-text uk-margin-small-left clickable" [flex]="true"
name="close" ratio="0.7"></icon>
</div>
</div>
<div *ngIf="searchControl" class="uk-width-expand uk-flex uk-flex-column uk-flex-center">
<div *ngIf="searchControl && (focused || formAsArray.length === 0)" class="uk-width-small uk-flex uk-flex-column uk-flex-center">
<input #searchInput class="input" [class.search]="searchControl.value"
[attr.placeholder]="placeholderInfo.static?placeholderInfo.label:hint"
[attr.placeholder]="placeholderInfo?.static?placeholderInfo.label:hint"
[formControl]="searchControl" [class.uk-text-truncate]="!focused">
</div>
<div *ngIf="!focused && formAsArray.length > 1" class="uk-width-expand uk-flex uk-flex-column uk-flex-center more">
+ {{(formAsArray.length - 1)}} more
</div>
</div>
</ng-template>
<div *ngIf="formControl.disabled || icon || (type === 'select' && selectArrow) || type === 'autocomplete'"
@ -358,6 +368,13 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.formControl.markAsDirty();
}
if(this.type === 'autocomplete_soft') {
this.filteredOptions = this.filter(value);
this.cdr.detectChanges();
if (this.focused) {
this.open(true);
}
}
this.valueChange.emit(this.formControl.value);
}));
if (this.input) {
@ -411,8 +428,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.formAsArray.push(new FormControl(this.searchControl.value, this.validators));
this.formAsArray.markAsDirty();
this.focus(true);
this.searchControl.setValue('');
}
this.searchControl.setValue('');
}
getLabel(value: any) {
@ -442,9 +459,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.open(false);
if (this.searchControl) {
if(this.formAsControl) {
this.searchControl.setValue('');
}
this.add(event);
}
}

6
sharedComponents/search-input/search-input.component.ts
View File

@ -20,8 +20,9 @@ import {InputComponent} from "../input/input.component";
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [formInput]="searchControl"></div>
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search"
[placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
</div>
<div [class.uk-hidden]="!searchControl?.value && !value" class="uk-width-auto">
<a class="uk-link-text" (click)="reset()">
@ -43,6 +44,7 @@ export class SearchInputComponent implements OnInit {
@Input() searchInputClass: string = 'inner';
@Input() searchControl: AbstractControl;
@Input() value: string;
@Input() options: string[] = [];
@Output() valueChange = new EventEmitter<string>();
@Input() placeholder: string;
@Input() expandable: boolean = false;

5
utils/icons/icons.ts
View File

@ -53,7 +53,10 @@ export const edit: Icon = {
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>'
}
/** @deprecated */
/** @deprecated
*
* Use delete
* */
export const remove: Icon = {
name: 'remove',
data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 9.91 11.01"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M8.83,1.85V9.41A1.58,1.58,0,0,1,7.26,11H2.62a1.6,1.6,0,0,1-1.57-1.6V1.85H.28A.26.26,0,0,1,0,1.57.27.27,0,0,1,.28,1.3H2.59v-1A.26.26,0,0,1,2.87,0H7a.28.28,0,0,1,.27.28v1H9.63a.28.28,0,0,1,.28.27.3.3,0,0,1-.28.28Zm-7.23,0V9.41a1,1,0,0,0,1,1.05H7.26a1,1,0,0,0,1-1.05V1.85ZM6.76,1.3V.55H3.15V1.3Z"/><path class="cls-1" d="M3.06,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M6.29,3.73a.28.28,0,0,1,.28-.28.29.29,0,0,1,.27.28V8.58a.29.29,0,0,1-.27.28.28.28,0,0,1-.28-.28Z"/><path class="cls-1" d="M4.66,3.73a.3.3,0,0,1,.28-.28.29.29,0,0,1,.28.28V8.58a.29.29,0,0,1-.28.28.3.3,0,0,1-.28-.28Z"/></g></g></svg>'