Feature/assets 8: add missing scrollbars (#40)

* assets-8: add scrollbars to all tabs in assets editor and user management

* assets-8: remove some duplicate attributes

* assets-8: fix unchanged files with annotations

* assets-8: fix unchanged files with annotations

* assets-8: fix unchanged files with annotations

---------

Co-authored-by: Alex Graf <Alex.Graf@ebp.ch>

libs/admin/src/lib/components/admin-page/admin-page.component.scss

@@ -21,6 +21,11 @@ mat-progress-bar {
     width: calc(100% - 1rem);
 }
 
+.user-list {
+  height: calc(100% - 4.5rem);
+  overflow-y: scroll;
+}
+
 asset-sg-user-collapsed,
 asset-sg-user-expanded {
     margin-bottom: 1rem;

libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.html

@@ -1,10 +1,10 @@
 <ng-container *rxLet="_referenceDataVM$; let referenceDataVM">
     <div class="flex flex-row max-h-full">
         <div class="flex flex-column form-column mb-12 mr-8">
-            <div class="flex flex-column bg-white py-4 px-6 max-h-full">
-                <div class="font-bold mb-4" translate translate>edit.tabs.administration.infoGeol</div>
+            <div class="flex flex-column bg-white py-4 px-6 max-h-full overflow-y-scroll">
+                <div class="font-bold mb-4"  translate>edit.tabs.administration.infoGeol</div>
                 <mat-form-field class="readonly">
-                    <mat-label translate translate>edit.tabs.administration.sgsId</mat-label>
+                    <mat-label  translate>edit.tabs.administration.sgsId</mat-label>
                     <input matInput [value]="_form.controls['sgsId'].value" [readonly]="true" />
                 </mat-form-field>
                 <mat-form-field class="readonly" floatLabel="always">

libs/asset-editor/src/lib/components/asset-editor-tab-administration/asset-editor-tab-administration.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
 import { FormBuilder, FormGroupDirective } from '@angular/forms';
 import { RxState } from '@rx-angular/state';
 import * as O from 'fp-ts/Option';
-import { Observable, map, take } from 'rxjs';
+import { Observable } from 'rxjs';
 
 import { fromAppShared } from '@asset-sg/client-shared';
 import { DateId } from '@asset-sg/shared';
@@ -55,7 +55,6 @@ export class AssetEditorTabAdministrationComponent implements OnInit {
 
     @Input()
     public set referenceDataVM$(value: Observable<fromAppShared.ReferenceDataVM>) {
-        // value.pipe(take(1)).subscribe(v => console.log(v));
         this._state.connect('referenceDataVM', value);
     }
 
@@ -69,7 +68,6 @@ export class AssetEditorTabAdministrationComponent implements OnInit {
         if (this._rootFormGroup.invalid) {
             this._rootFormGroup.markAllAsTouched();
         }
-        // console.log(this._form);
     }
 
     public save() {

libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.html

@@ -71,8 +71,8 @@
                 <ng-container *ngIf="uiMode !== 'view'">
                     <ng-container *ngIf="getForm(uiMode); let form">
                         <form *ngIf="form" [formGroup]="form">
-                            <div class="flex flex-column form-column mb-12">
-                                <div class="flex flex-column bg-white py-4 px-6 max-h-full">
+                            <div class="flex flex-column form-column mb-12 max-h-full ">
+                                <div class="flex flex-column bg-white py-4 px-6 overflow-y-scroll">
                                     <mat-form-field
                                         class="mb-2"
                                         *ngIf="uiMode === 'linkExisting' || uiMode === 'linkNew'">

libs/asset-editor/src/lib/components/asset-editor-tab-contacts/asset-editor-tab-contacts.component.ts

@@ -1,6 +1,5 @@
 import {
     ChangeDetectionStrategy,
-    ChangeDetectorRef,
     Component,
     EventEmitter,
     Input,

libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.html

@@ -1,7 +1,7 @@
 <ng-container *rxLet="_referenceDataVM$ | push; let vm">
     <form [formGroup]="_form" class="flex flex-row max-h-full">
         <div class="flex flex-column form-column mr-8">
-            <div class="flex flex-column bg-white mb-4 py-4 px-6">
+            <div class="flex flex-column bg-white mb-4 py-4 px-6 overflow-y-scroll">
                 <div class="font-bold mb-4" translate>edit.tabs.general.title</div>
                 <mat-form-field class="mb-2">
                     <mat-label translate>edit.tabs.general.publicTitle</mat-label>
@@ -89,7 +89,7 @@
             </div>
         </div>
         <div class="flex flex-column form-column mr-8">
-            <div class="flex flex-column bg-white mb-4 py-4 px-6">
+            <div class="flex flex-column bg-white mb-4 py-4 px-6 overflow-y-scroll">
                 <div class="font-bold mb-4" translate>edit.tabs.general.topic</div>
                 <asset-sg-multiselect
                     formControlName="manCatLabelRefs"

libs/asset-editor/src/lib/components/asset-editor-tab-general/asset-editor-tab-general.component.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit, ViewChild, inject } from '@angular/core';
-import { FormBuilder, FormControl, FormGroupDirective, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroupDirective } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { RxState } from '@rx-angular/state';
 import * as O from 'fp-ts/Option';
@@ -117,15 +117,14 @@ export class AssetEditorTabGeneralComponent implements OnInit {
             if (!this._state.get().userInsertMode && !this.idForm.controls['id'].value) {
                 this.idForm.controls['description'].reset(undefined, { emitEvent: false });
                 this.idForm.controls['description'].disable({ emitEvent: false });
-            } else {
-                if (this.idForm.controls['description'].disabled) {
+            } else if (this.idForm.controls['description'].disabled) {
                     this.idForm.controls['description'].enable({ emitEvent: false });
                     this.idForm.controls['description'].markAsTouched();
                     if (this._idFormDescription) {
                         this._focusMonitor.focusVia(this._idFormDescription?.nativeElement, 'program');
                     }
                 }
-            }
+
 
             // sync the idForm state with the ids control in the general form
             if (this._state.get().currentlyEditedIdIndex !== -1) {
@@ -144,15 +143,14 @@ export class AssetEditorTabGeneralComponent implements OnInit {
                         this._form.controls['ids'].setValue(ids, { emitEvent: false });
                         this._form.markAsDirty();
                     }
-                } else {
-                    if (ids.length > 0) {
+                } else if (ids.length > 0) {
                         this._form.controls.ids.setValue(
                             ids.filter((_, i) => i !== this._state.get().currentlyEditedIdIndex),
                             { emitEvent: false },
                         );
                         this._form.markAsDirty();
                     }
-                }
+
             }
         });
     }
@@ -240,7 +238,6 @@ export class AssetEditorTabGeneralComponent implements OnInit {
 
     public _fileInvalid$ = new BehaviorSubject<boolean>(false);
     public _fileInputChange(inputElement: HTMLInputElement) {
-        // console.log('adsf', inputElement.files);
         const files = inputElement.files;
         if (files && files.length > 0) {
             if (Array.from(files).some(f => f.size > 250 * 1024 * 1024)) {

libs/asset-editor/src/lib/components/asset-editor-tab-page/asset-editor-tab-page.component.scss

@@ -26,7 +26,7 @@ form {
 
 ::ng-deep {
     [role='tabpanel'] {
-        height: 100%;
+        height: calc(100% - 4rem);
         & > * {
             height: calc(100% - 1rem);
         }

libs/asset-editor/src/lib/components/asset-editor-tab-references/asset-editor-tab-references.component.ts

@@ -2,7 +2,7 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormBuilder, FormControl, FormGroupDirective, Validators } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { UntilDestroy } from '@ngneat/until-destroy';
 import * as A from 'fp-ts/Array';
 import * as E from 'fp-ts/Either';
 import { flow, pipe } from 'fp-ts/function';
@@ -13,7 +13,6 @@ import {
     catchError,
     combineLatest,
     debounceTime,
-    delay,
     distinctUntilChanged,
     map,
     of,

libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.html

@@ -1,7 +1,7 @@
 <ng-container *rxLet="_referenceDataVM$ | push; let vm">
-    <form [formGroup]="_form" class="flex flex-row">
+    <form [formGroup]="_form" class="flex flex-row max-h-full">
         <div class="flex flex-column form-column mr-8">
-            <div class="flex flex-column bg-white mb-4 py-4 px-6">
+            <div class="flex flex-column bg-white mb-4 py-4 px-6 overflow-y-scroll ">
                 <div class="font-bold mb-4" translate>edit.tabs.usage.internalUsage</div>
                 <div *ngIf="_form.controls['publicUse'].value" class="flex mb-2 bg-orange-01 px-3 py-2">
                     <svg-icon key="warning-filled" class="mr-3"></svg-icon

libs/asset-editor/src/lib/components/asset-editor-tab-usage/asset-editor-tab-usage.component.scss

@@ -1,6 +1,11 @@
 @use '../../styles/variables';
 @use '../../styles/mixins';
 
+:host {
+  display: block;
+  padding: 0 1rem 1rem 0;
+}
+
 .form-column {
     width: 34rem;
 }

libs/asset-editor/src/lib/components/asset-multiselect/asset-multiselect.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, forwardRef, inject } from '@angular/core';
-import { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { SvgIconComponent } from '@ngneat/svg-icon';

libs/asset-editor/src/lib/services/asset-editor.service.ts

@@ -1,9 +1,9 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import * as RD from '@devexperts/remote-data-ts';
 import * as E from 'fp-ts/Either';
-import { flow, pipe } from 'fp-ts/function';
-import { EMPTY, concat, concatAll, forkJoin, map, merge, of, startWith, switchMap, toArray } from 'rxjs';
+import { flow } from 'fp-ts/function';
+import { concat, forkJoin, map, of, startWith, toArray } from 'rxjs';
 
 import { ApiError, httpErrorResponseError } from '@asset-sg/client-shared';
 import { OE, ORD, decodeError, unknownError } from '@asset-sg/core';

libs/asset-editor/src/lib/state/asset-editor.effects.ts

@@ -6,7 +6,7 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { pipe } from 'fp-ts/function';
 import * as O from 'fp-ts/Option';
 import * as D from 'io-ts/Decoder';
-import { Observable, concat, concatMap, forkJoin, map, partition, share, switchMap, tap } from 'rxjs';
+import { Observable, concatMap, map, partition, share, switchMap, tap } from 'rxjs';
 
 import { appSharedStateActions, filterNavigateToComponent } from '@asset-sg/client-shared';
 import { DT, ORD, partitionEither } from '@asset-sg/core';

libs/client-shared/src/lib/components/drag-handle/drag-handle.component.ts

@@ -1,6 +1,6 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, ElementRef, EventEmitter, NgZone, Output, inject } from '@angular/core';
-import { Observable, distinctUntilChanged, finalize, fromEvent, map, merge, of, share, switchMap } from 'rxjs';
+import { Observable, distinctUntilChanged, fromEvent, map, merge, of, share, switchMap } from 'rxjs';
 
 export type DragHandleOffset = { offsetX: number; offsetY: number } | null;
 

libs/core/src/lib/utils/array.ts

@@ -6,39 +6,3 @@ export const makePairs = <A>(as: Array<A>): Array<[A, A]> => {
     return bs;
 };
 
-type ClassType = string | string[] | Set<string> | { [key: string]: unknown };
-
-const addClass = (currentClass: ClassType, className: string): ClassType => {
-    if (!currentClass) {
-        return className;
-    }
-    if (typeof currentClass == 'string' && !currentClass.match(className)) {
-        return `${currentClass} ${className}`;
-    }
-    if (Array.isArray(currentClass) && !currentClass.includes(className)) {
-        return [...currentClass, className];
-    }
-    if (currentClass instanceof Set) {
-        return currentClass.add(className);
-    }
-    if (typeof currentClass === 'object') {
-        return { ...currentClass, [className]: true };
-    }
-    return currentClass;
-};
-
-const removeClass = (currentClass: ClassType, className: string): ClassType => {
-    if (typeof currentClass == 'string' && !currentClass.match(className)) {
-        return currentClass.replace(`\\s*${className}`, '');
-    }
-    if (Array.isArray(currentClass) && !currentClass.includes(className)) {
-        return currentClass.filter(c => c !== className);
-    }
-    if (currentClass instanceof Set) {
-        return currentClass.add(className);
-    }
-    if (typeof currentClass === 'object') {
-        return { ...currentClass, [className]: true };
-    }
-    return currentClass;
-};

libs/ngx-kobalte/src/lib/components/tabs.ts

@@ -1,7 +1,7 @@
 import { Tabs } from '@kobalte/core';
 import type { TabsContentOptions, TabsRootOptions, TabsTriggerOptions } from '@kobalte/core/dist/types/tabs';
 import { Observable } from 'rxjs';
-import { Accessor, createSignal } from 'solid-js';
+import { Accessor } from 'solid-js';
 import h from 'solid-js/h';
 import { render } from 'solid-js/web';
 
@@ -23,8 +23,7 @@ export interface KobalteTabProps {
 
 export function KobalteTabs(element: HTMLElement, props: KobalteTabsProps, tabs$: Observable<KobalteTabProps[]>) {
     const tabs = fromWithStartWith(tabs$, []);
-    // const [tabKey, setTabKey] = createSignal<string | undefined>(undefined);
-    // setTimeout(() => setTabKey('usage'));
+
     render(
         () =>
             h(Tabs.Root, props, () => [