Add missing cdk-editor. Change mandatory fields in apis. Add redirect on personal-info if it is navigated from guard.

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^14.2.3",
     "@angular/material": "^14.2.2",
     "@angular/router": "^14.2.3",
+    "ng2-ckeditor": "1.3.7",
     "rxjs": "^6.5.1",
     "jquery": "^3.4.1",
     "tslib": "^2.3.0",

src/app/apis/apis.component.ts

@@ -60,8 +60,7 @@ declare var copy;
                                           customClass="uk-text-secondary" (click)="openInfoModal(i)"></icon>
                                     <icon *ngIf="api.invalid" name="warning" class="clickable uk-margin-xsmall-left"
                                           customClass="uk-text-warning" 
-                                          uk-tooltip="You have to fill missing information regarding your service in order to preview your details.
+                                          uk-tooltip="Please click edit to fill the missing information and preview your details."></icon>
-                                          Click edit to fill the missing information"></icon>
                                 </span>
                             </td>
                         </tr>
@@ -77,20 +76,20 @@ declare var copy;
                      [formInput]="form.get('name')"></div>
                 <div class="uk-width-1-2@m uk-width-1-1" input type="logoURL" placeholder="Service URL"
                      [formInput]="form.get('url')"></div>
+                <div class="uk-width-1-1" input type="textarea" placeholder="Service Description"
+                     [formInput]="form.get('description')">
+                </div>
+                <div class="uk-width-1-1" input type="chips" placeholder="Target groups" 
+                     [addExtraChips]="true" [separators]="[',']" [visibleChips]="groups.length"
+                     [formInput]="target" [options]="groups" [showOptionsOnEmpty]="false" [hint]="'Add a target group of your service'">
+                    <div note>Separate groups with commas</div>
+                </div>
                 <div class="uk-width-1-2@m uk-width-1-1" input type="logoURL" placeholder="Logo URL"
                      [formInput]="form.get('logoURL')">
                 </div>
                 <div class="uk-width-1-2@m uk-width-1-1" input type="select" placeholder="Service Frequency of use"
                      [formInput]="form.get('frequency')" [options]="frequency">
                 </div>
-                <div class="uk-width-1-1" input type="textarea" placeholder="Service Description"
-                     [formInput]="form.get('description')">
-                </div>
-                <div class="uk-width-1-1" input type="chips" placeholder="Target groups" 
-                     [addExtraChips]="true" [separators]="[',']"
-                     [formInput]="target" [options]="groups" [hint]="'Add a target group of your service'">
-                    <div note>Separate groups with commas</div>
-                </div>
                 <div class="uk-width-1-1">
                     <label class="uk-text-bold">Security Level</label>
                     <div id="security-hint" class="uk-margin">Register your service to get a client id and a client
@@ -102,16 +101,17 @@ declare var copy;
                             <label><input type="radio" name="securityLevel" [disabled]="index !== -1"
                                           class="uk-radio" (ngModelChange)="securityChanged($event)"
                                           [ngModel]="advanced" [value]="false"><span
-                                    class="uk-margin-small-left">Basic</span></label>
+                                    class="uk-margin-small-left" [class.uk-text-muted]="index !== -1">Basic</span></label>
                         </div>
                         <div>
                             <label><input type="radio" name="securityLevel" [disabled]="index !== -1"
                                           class="uk-radio" (ngModelChange)="securityChanged($event)"
-                                          [ngModel]="advanced" [value]="true"><span class="uk-margin-small-left">Advanced</span></label>
+                                          [ngModel]="advanced" [value]="true"><span
+                                class="uk-margin-small-left" [class.uk-text-muted]="index !== -1">Advanced</span></label>
                         </div>
                     </div>
                 </div>
-                <ng-container *ngIf="advanced">
+                <div id="advanced" class="uk-width-1-1" *ngIf="advanced">
                     <div class="uk-width-1-1">
                         <div class="uk-flex uk-flex-between">
                             <label class="uk-text-bold">Public Key</label>
@@ -135,7 +135,7 @@ declare var copy;
                          rows="5" placeholder="Key Value" [hint]="hint"></div>
                     <div *ngIf="!byValue" class="uk-width-1-1" type="logoURL" input [formInput]="form.get('uri')"
                          placeholder="Key URI"></div>
-                </ng-container>
+                </div>
             </div>
         </modal-alert>
         <modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirm()"></modal-alert>
@@ -214,10 +214,10 @@ declare var copy;
                             </div>
                         </div>
                     </ng-template>
-                    <li>
+                    <li>id="edit-service"
                         <div class="uk-flex">
                             <div class="uk-text-bold uk-width-small uk-margin-xsmall-right">Creation Date</div>
-                            <div class="uk-width-expand uk-text-break">{{api.service.creationDate | date: 'dd-mm-YYYY hh:MM'}}</div>
+                            <div class="uk-width-expand uk-text-break">{{api.service.creationDate | date: 'dd-MM-YYYY hh:mm'}}</div>
                         </div>
                     </li>
                 </ul>
@@ -296,8 +296,8 @@ export class ApisComponent implements OnInit, OnDestroy {
         this.form = this.fb.group({
             name: this.fb.control(api.service.name, Validators.required),
             keyType: this.fb.control(api.service.keyType),
-            description: this.fb.control(api.service.description),
+            description: this.fb.control(api.service.description, Validators.required),
-            frequency: this.fb.control(api.service.frequency, Validators.required),
+            frequency: this.fb.control(api.service.frequency),
             target: this.fb.array([], Validators.required),
             logoURL: this.fb.control(api.details.logoUri, [StringUtils.urlValidator()]),
             url: this.fb.control(api.service.url, [Validators.required, StringUtils.urlValidator()]),
@@ -383,6 +383,7 @@ export class ApisComponent implements OnInit, OnDestroy {
        this.advanced = event;
        if(this.advanced) {
            this.keyTypeChanged(true);
+           document.getElementById('advanced').scrollIntoView({behavior: 'smooth'});
        } else {
            this.form.get('keyType').setValue(null);
        }

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 55a045433077a4fb866345456694e6490654c89f
+Subproject commit 2b7c5da3d7049f327f97ac9b274d5d71f6206284

src/app/personal-info/personal-info.component.ts

@@ -54,6 +54,7 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
     info: PersonalInfo = null;
     affiliationTypeOptions: string[] = ['Organization', 'University', 'SME', 'Public Sector'];
     message: boolean = false;
+    redirect: string;
 
     constructor(private fb: FormBuilder,
                 private personalService: PersonalService,
@@ -64,6 +65,7 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
                 const navigation = this.router.getCurrentNavigation();
                 if (navigation && navigation.extras.state) {
                     this.message = navigation.extras.state.message;
+                    this.redirect = navigation.extras.state.redirect;
                 } else {
                     this.message = false;
                 }
@@ -116,6 +118,9 @@ export class PersonalInfoComponent implements OnInit, OnDestroy {
             this.initForm();
             this.loading = false;
             this.message = false;
+            if(this.redirect) {
+                this.router.navigate([this.redirect]);
+            }
         }, error => {
             console.error(error);
             NotificationHandler.rise('An error has occurred. Please try again later.', 'danger');

src/app/services/apis.service.ts

@@ -98,7 +98,7 @@ export class ApisService {
     }
 
     private setInvalid(api: API) {
-        api.invalid = !api.service.url || !api.service.frequency || !api.service.target || api.service.target.length == 0;
+        api.invalid = !api.service.url || !api.service.description || !api.service.target || api.service.target.length == 0;
         return api;
     }
 }

src/app/services/hasPersonalInfo.guard.ts

@@ -16,7 +16,7 @@ export class HasPersonalInfoGuard implements CanActivate {
     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
         return this.personalService.getPersonalInfo().pipe(catchError(() => of(null)), map(info => !!info), tap(hasInfo => {
             if(!hasInfo) {
-                this.router.navigate(['/personal-info'], {skipLocationChange: true, state: {message: true}});
+                this.router.navigate(['/personal-info'], {skipLocationChange: true, state: {message: true, redirect: state.url}});
             }
         }));
     }