fix: favorites updated

FraunhoferIOSB · Apr 26, 2024 · 8d7f582 · 8d7f582
1 parent 8a831ff
commit 8d7f582
Show file tree

Hide file tree

Showing 18 changed files with 192 additions and 150 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -54,29 +54,5 @@
             "runMode": "on-demand",
             "jestCommandLine": "node --experimental-vm-modules --no-warnings ../../node_modules/jest/bin/jest.js"
         }
-    ],
-    "karmaTestExplorer.projectWorkspaces": [
-        {
-            "rootPath": "projects/aas-lib",
-            // "karmaConfFilePath": "karma.config.cjs",
-            "testFramework": "jasmine",
-            "projectType": "angular",
-            "testsBasePath": "src/test",
-            // "testFiles": [
-            //     "src/**/*.spec.ts"
-            // ],
-            // "excludeFiles": ["dist/**/*.*"]
-        },
-        {
-            "rootPath": "projects/aas-portal",
-            "karmaConfFilePath": "karma.config.cjs",
-            "testFramework": "jasmine",
-            "projectType": "angular",
-            // "testsBasePath": "src/test",
-            // "testFiles": [
-            //     "src/**/*.spec.ts"
-            // ],
-            // "excludeFiles": ["dist/**/*.*"]
-        }
     ]
 }
diff --git a/projects/aas-lib/src/lib/aas-tree/aas-tree.component.html b/projects/aas-lib/src/lib/aas-tree/aas-tree.component.html
@@ -6,6 +6,7 @@
  !
  !---------------------------------------------------------------------------->
 
+@if (document?.content) {
 <table class="table table-sm table-hover table-striped align-middle">
     <thead>
         <tr>
@@ -126,3 +127,8 @@
         }
     </tbody>
 </table>
+} @else {
+<div class="position-relative">
+    <div class="position-absolute top-50 start-50 translate-middle">Keinen Kontent</div>
+</div>
+}
diff --git a/projects/aas-lib/src/lib/auth/auth.service.ts b/projects/aas-lib/src/lib/auth/auth.service.ts
@@ -9,7 +9,7 @@
 import { Injectable } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
-import { BehaviorSubject, catchError, from, map, mergeMap, Observable, of, throwError } from 'rxjs';
+import { BehaviorSubject, catchError, first, from, map, mergeMap, Observable, of, throwError } from 'rxjs';
 import { jwtDecode } from 'jwt-decode';
 import {
     ApplicationError,
@@ -255,12 +255,18 @@ export class AuthService {
      * @returns The cookie value.
      */
     public getCookie(name: string): Observable<string | undefined> {
-        const payload = this.payload$.getValue();
-        if (payload && payload.sub) {
-            return this.api.getCookie(payload.sub, name).pipe(map(cookie => cookie?.data));
-        } else {
-            return of(this.window.getLocalStorageItem(name) ?? undefined);
-        }
+        return this.ready.pipe(
+            first(ready => ready === true),
+            mergeMap(() => this.payload),
+            first(),
+            mergeMap(payload => {
+                if (payload && payload.sub) {
+                    return this.api.getCookie(payload.sub, name).pipe(map(cookie => cookie?.data));
+                }
+
+                return of(this.window.getLocalStorageItem(name) ?? undefined);
+            }),
+        );
     }
 
     /**

diff --git a/projects/aas-lib/src/test/max-length/max-length.pipe.spec.ts b/projects/aas-lib/src/test/max-length/max-length.pipe.spec.ts
@@ -6,7 +6,7 @@
  *
  *****************************************************************************/
 
-import { MaxLengthPipe } from "../../lib/max-length.pipe";
+import { MaxLengthPipe } from '../../lib/max-length.pipe';
 
 describe('MaxLengthPipe', () => {
     it('create an instance', () => {
@@ -19,8 +19,8 @@ describe('MaxLengthPipe', () => {
         expect(pipe.transform('0123456789', 10)).toEqual('0123456789');
     });
 
-    it('does not transform if text length <= max', function () {
+    it('transform if text length > max', function () {
         const pipe = new MaxLengthPipe();
         expect(pipe.transform('0123456789', 5)).toEqual('0...9');
     });
-});
+});
diff --git a/projects/aas-lib/src/test/score/score.component.spec.ts b/projects/aas-lib/src/test/score/score.component.spec.ts
@@ -10,7 +10,6 @@ import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ScoreComponent } from '../../lib/score/score.component';
 
-
 describe('ScoreComponent', () => {
     let component: ScoreComponent;
     let fixture: ComponentFixture<ScoreComponent>;
@@ -19,7 +18,7 @@ describe('ScoreComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [ScoreComponent]
+            declarations: [ScoreComponent],
         });
 
         fixture = TestBed.createComponent(ScoreComponent);
@@ -48,7 +47,7 @@ describe('ScoreComponent', () => {
         expect(positiveDiv.style.width).toEqual('42%');
         expect(negativeDiv.style.width).toEqual('0%');
     });
-    
+
     it('it shows a negative score', function () {
         component.score = -0.42;
         component.ngOnChanges({ score: new SimpleChange(0, component.score, true) });
@@ -79,13 +78,13 @@ describe('ScoreComponent', () => {
         expect(component.positive).toEqual(100);
         expect(component.negative).toEqual(0);
     });
-    
-    it('it shows a negative score', function () {
+
+    it('it shows a 100% negative score', function () {
         component.score = -1234567.89;
         component.ngOnChanges({ score: new SimpleChange(0, component.score, true) });
         fixture.detectChanges();
 
         expect(component.negative).toEqual(100);
         expect(component.positive).toEqual(0);
     });
-});
+});
diff --git a/projects/aas-portal/src/app/aas/aas-api.service.ts b/projects/aas-portal/src/app/aas/aas-api.service.ts
@@ -8,7 +8,7 @@
 
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { AASDocument } from 'common';
+import { AASDocument, aas } from 'common';
 import { Observable } from 'rxjs';
 import { encodeBase64Url } from 'aas-lib';
 
@@ -22,19 +22,31 @@ export class AASApiService {
     /**
      * Gets the AAS document with the specified identifier.
      * @param id The AAS identifier.
-     * @param name The AAS container name.
+     * @param endpoint The endpoint name.
      * @returns The requested AAS document.
      */
-    public getDocument(id: string, name?: string): Observable<AASDocument> {
-        if (name) {
+    public getDocument(id: string, endpoint?: string): Observable<AASDocument> {
+        if (endpoint) {
             return this.http.get<AASDocument>(
-                `/api/v1/containers/${encodeBase64Url(name)}/documents/${encodeBase64Url(id)}`,
+                `/api/v1/containers/${encodeBase64Url(endpoint)}/documents/${encodeBase64Url(id)}`,
             );
         }
 
         return this.http.get<AASDocument>(`/api/v1/documents/${encodeBase64Url(id)}`);
     }
 
+    /**
+     * Loads the element structure of the specified document.
+     * @param endpoint The endpoint name.
+     * @param id The identification of the AAS document.
+     * @returns The root of the element structure.
+     */
+    public getContent(id: string, endpoint: string): Observable<aas.Environment> {
+        return this.http.get<aas.Environment>(
+            `/api/v1/containers/${encodeBase64Url(endpoint)}/documents/${encodeBase64Url(id)}/content`,
+        );
+    }
+
     /**
      * Applies a changed AAS document.
      * @param document The document to apply.

diff --git a/projects/aas-portal/src/app/aas/aas.actions.ts b/projects/aas-portal/src/app/aas/aas.actions.ts
@@ -12,6 +12,7 @@ import { AASDocument } from 'common';
 
 export enum AASActionType {
     GET_DOCUMENT = '[AAS] get document',
+    GET_DOCUMENT_CONTENT = '[AAS] get document content',
     SET_DOCUMENT = '[AAS] set document',
     APPLY_DOCUMENT = '[AAS] apply document',
     RESET_MODIFIED = '[AAS] reset modified',
@@ -25,8 +26,14 @@ export interface GetDocumentAction extends TypedAction<AASActionType.GET_DOCUMEN
     name?: string;
 }
 
+export interface GetDocumentContentAction extends TypedAction<AASActionType.GET_DOCUMENT_CONTENT> {
+    document: AASDocument;
+}
+
 export const getDocument = createAction(AASActionType.GET_DOCUMENT, props<{ id: string; name?: string }>());
 
+export const getDocumentContent = createAction(AASActionType.GET_DOCUMENT_CONTENT, props<{ document: AASDocument }>());
+
 export const setDocument = createAction(AASActionType.SET_DOCUMENT, props<{ document: AASDocument | null }>());
 
 export const applyDocument = createAction(AASActionType.APPLY_DOCUMENT, props<{ document: AASDocument }>());

diff --git a/projects/aas-portal/src/app/aas/aas.component.html b/projects/aas-portal/src/app/aas/aas.component.html
@@ -6,7 +6,8 @@
  !
  !---------------------------------------------------------------------------->
 
-<div id="start-container" class="container-fluid">
+@if((document | async) !== null) {
+<div id="aas-container" class="container-fluid">
     <div class="row mt-1">
         <div class="d-flex flex-row">
             <div class="border border-secondary rounded p-1">
@@ -103,4 +104,7 @@
             <i class="bi bi-chevron-up"></i>
         </button>
     </div>
-</ng-template>
+</ng-template>
+} @else {
+<div>Kein Document</div>
+}
diff --git a/projects/aas-portal/src/app/aas/aas.component.ts b/projects/aas-portal/src/app/aas/aas.component.ts
@@ -153,10 +153,12 @@ export class AASComponent implements OnInit, OnDestroy, AfterViewInit {
 
                 if (params) {
                     const document: AASDocument = this.clipboard.get('AASDocument');
-                    if (!document || !document.content) {
+                    if (!document) {
                         this.store.dispatch(AASActions.getDocument({ id: params.id, name: params.endpoint }));
+                    } else if (!document.content) {
+                        this.store.dispatch(AASActions.getDocumentContent({ document: document }));
                     } else {
-                        this.store.dispatch(AASActions.setDocument({ document: document }));
+                        this.store.dispatch(AASActions.setDocument({ document }));
                     }
                 }
             }),

diff --git a/projects/aas-portal/src/app/aas/aas.effects.ts b/projects/aas-portal/src/app/aas/aas.effects.ts
@@ -8,7 +8,7 @@
 
 import { Injectable } from '@angular/core';
 import { Actions, createEffect, ofType } from '@ngrx/effects';
-import { exhaustMap, map } from 'rxjs';
+import { catchError, exhaustMap, map, of } from 'rxjs';
 
 import * as AASActions from './aas.actions';
 import { AASApiService } from './aas-api.service';
@@ -24,9 +24,22 @@ export class AASEffects {
         return this.actions.pipe(
             ofType<AASActions.GetDocumentAction>(AASActions.AASActionType.GET_DOCUMENT),
             exhaustMap(action =>
-                this.api
-                    .getDocument(action.id, action.name)
-                    .pipe(map(document => AASActions.setDocument({ document }))),
+                this.api.getDocument(action.id, action.name).pipe(
+                    map(document => AASActions.setDocument({ document })),
+                    catchError(() => of(AASActions.setDocument({ document: null }))),
+                ),
+            ),
+        );
+    });
+
+    public getDocumentContent = createEffect(() => {
+        return this.actions.pipe(
+            ofType<AASActions.GetDocumentContentAction>(AASActions.AASActionType.GET_DOCUMENT_CONTENT),
+            exhaustMap(action =>
+                this.api.getContent(action.document.id, action.document.endpoint).pipe(
+                    map(content => AASActions.setDocument({ document: { ...action.document, content } })),
+                    catchError(() => of(AASActions.setDocument({ document: action.document }))),
+                ),
             ),
         );
     });

diff --git a/projects/aas-portal/src/app/start/favorites-form/favorites-form.component.html b/projects/aas-portal/src/app/start/favorites-form/favorites-form.component.html
@@ -29,20 +29,23 @@ <h4 class="modal-title">
                     autocomplete="false" (change)="selected($event.target, item)" [checked]="item.selected">
                 <input class="form-control no-border" type="text" name="item.name"
                     (input)="valueChanged($event.target, item)" [value]="item.name" required>
-                <button class="btn text-success fs-5 p-0 me-2" type="button" [hidden]="!item.active && !item.selected"
-                    (click)="add(item)">
-                    <i class="bi bi-plus-lg"></i>
-                </button>
                 <button class="btn text-danger fs-5 p-0" type="button" [hidden]="!item.active && !item.selected"
                     (click)="delete(item)">
                     <i class="bi bi-trash"></i>
                 </button>
             </div>
+            @if(item.selected && text) {
+            <div class="fw-light ts-small">{{text}}</div>
+            }
         </li>
         }
     </ul>
 </div>
 <div class="modal-footer">
+    <div class="position-absolute start-0 ms-3">
+        <a class="link-opacity-50-hover" href="javascript:void(0)" (click)="addNew()"
+            translate>CMD_ADD_NEW_FAVORITES_LIST</a>
+    </div>
     <button type="submit" class="btn btn-primary" (click)="submit()" translate>CMD_OK</button>
     <button type="button" class="btn btn-secondary" (click)="cancel()" translate>CMD_CANCEL</button>
 </div>
diff --git a/projects/aas-portal/src/app/start/favorites-form/favorites-form.component.ts b/projects/aas-portal/src/app/start/favorites-form/favorites-form.component.ts
@@ -8,7 +8,7 @@
 
 import { Component } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { AASDocument, ApplicationError } from 'common';
+import { AASDocument, ApplicationError, stringFormat } from 'common';
 import { FavoritesService } from '../favorites.service';
 import { first, from, map, mergeMap, of, tap } from 'rxjs';
 import { messageToString } from 'aas-lib';
@@ -80,6 +80,18 @@ export class FavoritesFormComponent {
         return this._items.filter(item => item.delete === false);
     }
 
+    public get text(): string {
+        if (this.documents.length === 0) {
+            return '';
+        }
+
+        if (this.documents.length === 1) {
+            return this.translate.instant('TEXT_ADD_FAVORITE');
+        }
+
+        return stringFormat(this.translate.instant('TEXT_ADD_FAVORITES'), this.documents.length);
+    }
+
     public delete(item: FavoritesItem): void {
         if (item.added) {
             this._items.splice(this._items.indexOf(item), 1);
@@ -88,12 +100,13 @@ export class FavoritesFormComponent {
         }
     }
 
-    public add(sibling: FavoritesItem): void {
+    public addNew(): void {
         const name = this.uniqueName();
-        this._items.splice(this.items.indexOf(sibling) + 1, 0, {
+        this._items.forEach(i => (i.selected = false));
+        this._items.push({
             name: name,
             id: name,
-            selected: false,
+            selected: true,
             active: false,
             added: true,
             delete: false,

diff --git a/projects/aas-portal/src/app/start/start-api.service.ts b/projects/aas-portal/src/app/start/start-api.service.ts
@@ -79,13 +79,13 @@ export class StartApiService {
 
     /**
      * Loads the element structure of the specified document.
-     * @param endpointName The URL of the container.
+     * @param endpoint The endpoint name.
      * @param id The identification of the AAS document.
      * @returns The root of the element structure.
      */
-    public getContent(endpointName: string, id: string): Observable<aas.Environment> {
+    public getContent(endpoint: string, id: string): Observable<aas.Environment> {
         return this.http.get<aas.Environment>(
-            `/api/v1/containers/${encodeBase64Url(endpointName)}/documents/${encodeBase64Url(id)}/content`,
+            `/api/v1/containers/${encodeBase64Url(endpoint)}/documents/${encodeBase64Url(id)}/content`,
         );
     }