[Library | Trunk]: 1. Fix chips css. 2. Stakeholder Service: Init is Upload after request

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60326 d315682c-612b-4755-9ff5-7f18f6832af3

monitor/services/stakeholder.service.ts

@@ -7,6 +7,8 @@ import {map} from "rxjs/operators";
 import {ActivatedRoute} from "@angular/router";
 import {properties} from "../../../../environments/environment";
 import {CustomOptions} from "../../services/servicesUtils/customOptions.class";
+import {StringUtils} from "../../utils/string-utils.class";
+import {el} from "@angular/platform-browser/testing/src/browser_util";
 
 let maps: string[] = ['parameters', 'filters'];
 
@@ -43,7 +45,7 @@ export class StakeholderService {
     if (!this.stakeholderSubject.value || this.stakeholderSubject.value.alias !== alias) {
       this.promise = new Promise<any>((resolve, reject) => {
         this.sub = this.http.get<Stakeholder>(properties.monitorServiceAPIURL + '/stakeholder/' + encodeURIComponent(alias), CustomOptions.registryOptions()).pipe(map(stakeholder => {
-          return this.formalize(stakeholder);
+          return this.formalize(this.checkIsUpload(stakeholder));
         })).subscribe(stakeholder => {
           this.stakeholderSubject.next(stakeholder);
           resolve();
@@ -70,25 +72,25 @@ export class StakeholderService {
   
   getStakeholders(url: string, type: string = null): Observable<(Stakeholder & StakeholderInfo)[]> {
     return this.http.get<Stakeholder[]>(url + '/stakeholder' + ((type) ? ('?type=' + type) : ''), CustomOptions.registryOptions()).pipe(map(stakeholders => {
-      return this.formalize(stakeholders);
+      return this.formalize(this.checkIsUpload(stakeholders));
     }));
   }
   
   getMyStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
     return this.http.get<Stakeholder[]>(url + '/my-stakeholder' + ((type) ? ('?type=' + type) : ''), CustomOptions.registryOptions()).pipe(map(stakeholders => {
-      return this.formalize(stakeholders);
+      return this.formalize(this.checkIsUpload(stakeholders));
     }));
   }
   
   getDefaultStakeholders(url: string, type: string = null): Observable<Stakeholder[]> {
     return this.http.get<Stakeholder[]>(url + '/stakeholder/default' + ((type) ? ('?type=' + type) : ''), CustomOptions.registryOptions()).pipe(map(stakeholders => {
-      return this.formalize(stakeholders);
+      return this.formalize(this.checkIsUpload(stakeholders));
     }));
   }
   
   buildStakeholder(url: string, stakeholder: Stakeholder): Observable<Stakeholder> {
     return this.http.post<Stakeholder>(url + '/build-stakeholder', stakeholder, CustomOptions.registryOptions()).pipe(map(stakeholder => {
-      return this.formalize(stakeholder);
+      return this.formalize(this.checkIsUpload(stakeholder));
     }));
   }
   
@@ -100,7 +102,11 @@ export class StakeholderService {
     path = HelperFunctions.encodeArray(path);
     return this.http.post<any>(url + ((path.length > 0) ? '/' : '') + path.join('/') +
       '/save', element, CustomOptions.registryOptions()).pipe(map(element => {
-      return this.formalize(element);
+        if(path.length === 0) {
+          return this.formalize(this.checkIsUpload(element));
+        } else {
+          this.formalize(element);
+        }
     }));
   }
   
@@ -136,6 +142,17 @@ export class StakeholderService {
     this.stakeholderSubject.next(stakeholder);
   }
   
+  private checkIsUpload(response: Stakeholder | Stakeholder[]): any | any[] {
+    if(Array.isArray(response)) {
+      response.forEach(value => {
+        value.isUpload = !StringUtils.isValidUrl(value.logoUrl);
+      });
+    } else {
+      response.isUpload =  !StringUtils.isValidUrl(response.logoUrl);
+    }
+    return response;
+  }
+  
   private formalize(element: any) {
     return HelperFunctions.copy(element);
   }

sharedComponents/input/input.component.css

@@ -32,3 +32,7 @@
   font-family: "Roboto", sans-serif;
   font-size: 14px;
 }
+
+.chip-input {
+  min-width: 100px;
+}

sharedComponents/input/input.component.ts

@@ -72,13 +72,11 @@ export interface Option {
             <mat-form-field class="uk-width-1-1">
               <mat-chip-list #chipList aria-label="Page selection">
                 <mat-chip *ngFor="let chip of formAsArray.controls; let i=index"
-                          (removed)="removed(i)"
                           [removable]="removable">
                   {{chip.value[chipLabel]}}
-                  <span (click)="removed(i)"
+                  <icon name="remove_circle" class="mat-chip-remove" (click)="removed(i)"></icon>
-                        class="mat-chip-remove mat-chip-trailing-icon" uk-icon="close"></span>
                 </mat-chip>
-                <div class="uk-width-expand uk-position-relative uk-text-small">
+                <div class="uk-width-expand uk-position-relative uk-text-small chip-input">
                   <input #searchInput class="uk-width-1-1" [formControl]="searchControl" [matAutocomplete]="auto" [matChipInputFor]="chipList">
                   <div *ngIf="placeholder && !searchControl.value" class="placeholder uk-width-1-1"
                        (click)="searchInput.focus()">{{placeholder}}</div>

sharedComponents/input/input.module.ts

@@ -7,7 +7,7 @@ import {MatSelectModule} from "@angular/material/select";
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {IconsModule} from "../../utils/icons/icons.module";
 import {IconsService} from "../../utils/icons/icons.service";
-import {lock} from "../../utils/icons/icons";
+import {lock, remove_circle} from "../../utils/icons/icons";
 import {MatChipsModule} from "@angular/material/chips";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {MatIconModule} from "@angular/material/icon";
@@ -33,6 +33,6 @@ import {MatIconModule} from "@angular/material/icon";
 })
 export class InputModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([lock]);
+    this.iconsService.registerIcons([lock, remove_circle]);
   }
 }

utils/icons/icons.ts

@@ -62,6 +62,11 @@ export const bullet: Icon = {
   data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="10"/></svg>'
 }
 
+export const remove_circle = {
+  name: 'remove_circle',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="20" viewBox="0 0 24 24" width="20"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><path d="M12,2C6.47,2,2,6.47,2,12c0,5.53,4.47,10,10,10s10-4.47,10-10C22,6.47,17.53,2,12,2z M16.29,14.89 c0.39,0.39,0.39,1.02,0,1.41c-0.39,0.39-1.02,0.39-1.41,0L12,13.41l-2.89,2.89c-0.39,0.39-1.02,0.39-1.41,0 c-0.39-0.39-0.39-1.02,0-1.41L10.59,12L7.71,9.11c-0.39-0.39-0.39-1.02,0-1.41c0.39-0.39,1.02-0.39,1.41,0L12,10.59l2.89-2.89 c0.39-0.39,1.02-0.39,1.41,0c0.39,0.39,0.39,1.02,0,1.41L13.41,12L16.29,14.89z"/></g></svg>'
+}
+
 export const remove_circle_outline = {
   name: 'remove_circle_outline',
   data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>'

utils/string-utils.class.ts

@@ -187,6 +187,11 @@ export class Identifier {
 }
 
 export class StringUtils {
+  
+  public static urlRegex = 'https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
+    '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
+    '[a-zA-Z0-9]+\.[^\s]{2,}';
+  
   public static urlPrefix(url: string): string {
     if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("//")) {
       return "";
@@ -230,10 +235,12 @@ export class StringUtils {
     return !!email.match("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
   }
   
+  public static isValidUrl(url: string): boolean {
+    return new RegExp(this.urlRegex).test(url);
+  }
+  
   public static urlValidator(): ValidatorFn {
-    return  Validators.pattern('https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.' +
+    return  Validators.pattern(this.urlRegex);
-      '[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.' +
-      '[a-zA-Z0-9]+\.[^\s]{2,}');
   }
   
   public static sliceString(mystr, size: number): string {