feat: ux-improvements (DEV-) (#1542)

dasch-swiss · Apr 10, 2024 · 2f45316 · 2f45316
1 parent bee0dc9
commit 2f45316
Show file tree

Hide file tree

Showing 63 changed files with 1,127 additions and 778 deletions.
diff --git a/.github/workflows/publish-from-branch.yml b/.github/workflows/publish-from-branch.yml
@@ -1,7 +1,6 @@
 name: Publish from branch
 
-on:
-  workflow_dispatch
+on: workflow_dispatch
 jobs:
   publish-from-branch:
     name: Publish from branch
@@ -18,4 +17,7 @@ jobs:
         with:
           username: ${{ secrets.DOCKER_USER }}
           password: ${{ secrets.DOCKER_HUB_TOKEN }}
+      - run: |
+          echo "//npm.pkg.github.com/:_authToken=${{ secrets.ORG_GITHUB_PACKAGES_PAT }}" > ~/.npmrc
+          echo "@dasch-swiss:registry=https://npm.pkg.github.com/dasch-swiss" >> ~/.npmrc
       - run: make docker-publish
diff --git a/apps/dsp-app/cypress/e2e/logged-out-user/dashboard.cy.ts b/apps/dsp-app/cypress/e2e/logged-out-user/dashboard.cy.ts
@@ -2,11 +2,10 @@ describe('Visual Check for Projects on Home Page', () => {
   it('should load clickable projects on the home page', () => {
     cy.visit('/');
 
-    cy.get('[data-cy=tile]')
+    cy.get('[data-cy=navigate-to-project-button]')
       .should('be.visible')
       .should('have.length.greaterThan', 0)
-      .first()
-      .find('[data-cy=navigate-to-project-button]')
+      .eq(Math.floor(Math.random() * 5))
       .click();
 
     cy.url().should('include', '/project'); // Update with the expected URL

diff --git a/apps/dsp-app/cypress/e2e/system-admin/dashboard.cy.ts b/apps/dsp-app/cypress/e2e/system-admin/dashboard.cy.ts
@@ -1,11 +1,13 @@
 describe('Dashboard', () => {
   it('should load clickable projects on the home page', () => {
     cy.visit('/');
-    const projectTileSelector = '[data-cy=tile]';
+    const projectTileSelector = '[data-cy=navigate-to-project-button]';
 
     cy.get(projectTileSelector).should('be.visible').should('have.length.greaterThan', 0);
 
-    cy.get(projectTileSelector).first().find('[data-cy=navigate-to-project-button]').click();
+    cy.get(projectTileSelector)
+      .eq(Math.floor(Math.random() * 5))
+      .click();
 
     cy.url().should('include', '/project'); // Update with the expected URL
   });

diff --git a/apps/dsp-app/src/app/app.module.ts b/apps/dsp-app/src/app/app.module.ts
@@ -137,6 +137,7 @@ import { CreateLinkResourceComponent } from './workspace/resource/operations/cre
 import { DisplayEditComponent } from './workspace/resource/operations/display-edit/display-edit.component';
 import { PermissionInfoComponent } from './workspace/resource/permission-info/permission-info.component';
 import { PropertiesComponent } from './workspace/resource/properties/properties.component';
+import { ResourceToolbarComponent } from './workspace/resource/properties/resource-toolbar/resource-toolbar';
 import { AddRegionFormComponent } from './workspace/resource/representation/add-region-form/add-region-form.component';
 import { ArchiveComponent } from './workspace/resource/representation/archive/archive.component';
 import { AudioComponent } from './workspace/resource/representation/audio/audio.component';
@@ -285,6 +286,7 @@ export function httpLoaderFactory(httpClient: HttpClient) {
     ResourceInstanceFormComponent,
     ResourceLinkFormComponent,
     ResourceListComponent,
+    ResourceToolbarComponent,
     ResultsComponent,
     SearchPanelComponent,
     SelectedResourcesComponent,

diff --git a/apps/dsp-app/src/app/main/directive/base-value.directive.ts b/apps/dsp-app/src/app/main/directive/base-value.directive.ts
@@ -1,13 +1,18 @@
 import { Directive, Input, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
 import { CreateValue, ReadValue, UpdateValue } from '@dasch-swiss/dsp-js';
-import { Subscription } from 'rxjs';
+import { ResourceSelectors } from '@dasch-swiss/vre/shared/app-state';
+import { Select, Store } from '@ngxs/store';
+import { Observable, Subject, Subscription } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 
 // https://stackoverflow.com/questions/45661010/dynamic-nested-reactive-form-expressionchangedafterithasbeencheckederror
 const resolvedPromise = Promise.resolve(null);
 
 @Directive()
 export abstract class BaseValueDirective implements OnInit, OnDestroy {
+  private ngUnsubscribe: Subject<void> = new Subject<void>();
+
   /**
    * sets the mode of the component.
    */
@@ -33,8 +38,6 @@ export abstract class BaseValueDirective implements OnInit, OnDestroy {
    */
   @Input() commentDisabled? = false;
 
-  shouldShowComment = false;
-
   /**
    * subscription of comment changes.
    */
@@ -59,16 +62,28 @@ export abstract class BaseValueDirective implements OnInit, OnDestroy {
    * value to be displayed, if any.
    */
   /* eslint-disable */
-    @Input() abstract displayValue?: ReadValue;
-    /* eslint-enable */
+  @Input() abstract displayValue?: ReadValue;
+  /* eslint-enable */
 
   /**
    * custom validators for a specific value type.
    * Can be initialized to an empty array if not needed.
    */
   abstract customValidators: ValidatorFn[];
 
-  constructor(protected _fb?: FormBuilder) {}
+  commentIsVisible$ = this._store.select(ResourceSelectors.showAllComments).pipe(
+    takeUntil(this.ngUnsubscribe),
+    map(showAllComments => {
+      return showAllComments && this.commentFormControl.value && this.commentFormControl.value.length > 0;
+    })
+  );
+
+  @Select(ResourceSelectors.showAllComments) showAllComments$: Observable<boolean>;
+
+  constructor(
+    protected _store: Store,
+    protected _fb?: FormBuilder
+  ) {}
 
   ngOnInit() {
     // initialize form control elements
@@ -91,6 +106,9 @@ export abstract class BaseValueDirective implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
+    this.ngUnsubscribe.next();
+    this.ngUnsubscribe.complete();
+
     // unsubscribe to avoid memory leaks
     if (this.commentChangesSubscription) {
       this.commentChangesSubscription.unsubscribe();
@@ -173,20 +191,6 @@ export abstract class BaseValueDirective implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * hide comment field by default if in READ mode
-   */
-  updateCommentVisibility(): void {
-    this.shouldShowComment = this.mode === 'read';
-  }
-
-  /**
-   * toggles visibility of the comment field regardless of the mode
-   */
-  toggleCommentVisibility(): void {
-    this.shouldShowComment = !this.shouldShowComment;
-  }
-
   /**
    * add the value components FormGroup to a parent FormGroup if one is defined
    */

diff --git a/apps/dsp-app/src/app/system/project-tile/project-tile.component.html b/apps/dsp-app/src/app/system/project-tile/project-tile.component.html
@@ -1,38 +1,9 @@
-<div class="project-tile" data-cy="tile">
-  <div class="project-tile-content">
-    <div class="top-bar">
-      <div class="status">
-        <div *ngIf="project.status === true" class="status-badge active">
-          <span>Active</span>
-        </div>
-        <div *ngIf="project.status === false" class="status-badge deactivated">
-          <span>Deactivated</span>
-        </div>
+<a (click)="navigateToProject(project.id)" data-cy="navigate-to-project-button">
+  <div class="project-tile" data-cy="tile">
+    <div class="project-tile-content">
+      <div class="title">
+        <p class="title-text">{{project.longname}}</p>
       </div>
-      <div *ngIf="sysAdmin" class="settings">
-        <button color="primary" class="settings-button" mat-icon-button (click)="navigateToSettings(project.id)">
-          <mat-icon>settings</mat-icon>
-        </button>
-      </div>
-    </div>
-
-    <div class="icon">
-      <mat-icon color="primary">redeem</mat-icon>
-    </div>
-
-    <div class="title">
-      <p class="title-text">{{project.longname}}</p>
-    </div>
-
-    <div class="workspace-button-container">
-      <button
-        class="workspace-button"
-        mat-flat-button
-        [color]="'primary'"
-        (click)="navigateToProject(project.id)"
-        data-cy="navigate-to-project-button">
-        Browse Data
-      </button>
     </div>
   </div>
-</div>
+</a>
diff --git a/apps/dsp-app/src/app/system/project-tile/project-tile.component.scss b/apps/dsp-app/src/app/system/project-tile/project-tile.component.scss
@@ -1,105 +1,50 @@
 @use '@angular/material' as mat;
-@use "../../../styles/config" as *;
-@use "../../../styles/typography" as t;
+@use '../../../styles/config' as *;
+@use '../../../styles/typography' as t;
+@use '../../../styles/responsive' as *;
 
 .project-tile {
+  :hover {
+    border-radius: 6px;
+    background-color: $secondary_600;
+  }
+
   border: 1px solid $cool_gray_300;
   border-radius: 6px;
   box-shadow: 0px 4px 4px $cool_gray_300;
 
   .project-tile-content {
-    padding: 10px 5px 10px 10px;
-
-    .top-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .status,
-      .settings {
-        display: inline-block;
-      }
-
-      .status {
-        .status-badge {
-          border-radius: 10px;
-          padding: 2px 10px 4px 10px;
-
-          span {
-            font-size: 12px;
-          }
-        }
-
-        .status-badge.active {
-          background-color: #99F6E4;
-
-          span {
-            color: #0F766E;
-          }
-        }
-
-        .status-badge.deactivated {
-          background-color: #E5E7EB;
-
-          span {
-            color: #6B7280;
-          }
-        }
-      }
-
-      .settings {
-        mat-icon-button {
-          width: 28px;
-          height: 28px;
-          line-height: 28px;
-
-          mat-icon {
-            height: 28px;
-            width: 28px;
-            font-size: 28px;
-            line-height: 28px;
-          }
-        }
-      }
-    }
-
-    .icon {
-      padding-top: 23px;
-
-      mat-icon {
-        font-size: 40px;
-        height: 40px;
-        width: 40px;
-      }
-    }
+    padding: 10px;
+    text-align: -webkit-center;
+    text-align: -moz-center;
 
     .title {
-      padding: 20px;
-      height: 80px;
+      padding: 10px;
+      height: 191px;
+      vertical-align: middle;
+      display: table-cell;
     }
     .title-text {
-      font-weight: 700;
-      font-size: 24px;
+      font-weight: 500;
+      font-size: 18px;
       color: $black;
       display: -webkit-box;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 8;
       -webkit-box-orient: vertical;
       overflow: hidden;
       overflow-wrap: break-word;
       text-overflow: ellipsis;
-      line-height: 28px;
+      line-height: 24px;
+      margin: 0;
     }
+  }
+}
 
-    .workspace-button-container {
-      margin: 14% 0%;
-
-      @include mat.button-typography(t.$dsp-typography-config);
-
-      button {
+@media (max-width: map-get($grid-breakpoints, notebook)) {
+  .project-tile {
+    .title {
+      p.title-text {
         font-size: 16px;
-        line-height: 24px;
-        font-weight: 400;
-        padding: 13px 21px;
       }
     }
   }

diff --git a/apps/dsp-app/src/app/user/overview/overview.component.html b/apps/dsp-app/src/app/user/overview/overview.component.html
@@ -9,9 +9,6 @@
         <div class="title">
           <p>Browse Research Projects</p>
         </div>
-        <div class="create-project-button">
-          <button mat-flat-button [color]="'primary'" (click)="createNewProject()">Create New Project</button>
-        </div>
       </div>
       <div class="project-tiles">
         <div *ngFor="let proj of allProjects$ | async; trackBy: trackByFn" class="project-tile-container">