WIP: Adjustments to "Annotate" and "Collaborate" pages

src/app/app.module.ts

@@ -53,7 +53,9 @@ import {
   EntityComponent,
   EntityDetailComponent,
   FooterComponent,
+  GridComponent,
   GridElementComponent,
+  GroupElementComponent,
   InstitutionComponent,
   NavbarComponent,
   PersonComponent,
@@ -86,24 +88,24 @@ import {
 } from './wizards';
 
 // Pipes
-import { FilesizePipe, SafePipe } from './pipes';
+import { FilesizePipe, ReplayHasValuePipe, SafePipe } from './pipes';
+import { CountUniqueGroupMembersPipe } from './components/elements/group-element/count-unique-group-members.pipe';
 
 // Dialogs
 import {
   ConfirmationDialogComponent,
   EditEntityDialogComponent,
   EntityRightsDialogComponent,
   EntitySettingsDialogComponent,
-  ExploreCompilationDialogComponent,
-  ExploreEntityDialogComponent,
+  ForgotPasswordDialogComponent,
+  ForgotUsernameDialogComponent,
   GroupMemberDialogComponent,
   PasswordProtectedDialogComponent,
   RegisterDialogComponent,
+  ResetPasswordDialogComponent,
   UploadApplicationDialogComponent,
+  ViewerDialogComponent,
 } from './dialogs';
-import { ResetPasswordDialogComponent } from './dialogs/reset-password-dialog/reset-password-dialog.component';
-import { ForgotUsernameDialogComponent } from './dialogs/forgot-username-dialog/forgot-username-dialog.component';
-import { ForgotPasswordDialogComponent } from './dialogs/forgot-password-dialog/forgot-password-dialog.component';
 
 // Interceptors
 import { HttpOptionsInterceptor } from './services/interceptors/http-options-interceptor';
@@ -148,12 +150,10 @@ const INTERCEPTORS: Provider[] = [
         AnnotateComponent,
         CollaborateComponent,
         AboutComponent,
-        ExploreEntityDialogComponent,
         UploadApplicationDialogComponent,
         ProfilePageHelpComponent,
         ActionbarComponent,
         AnimatedImageComponent,
-        ExploreCompilationDialogComponent,
         EditEntityDialogComponent,
         AdminPageComponent,
         CompilationDetailComponent,
@@ -169,6 +169,11 @@ const INTERCEPTORS: Provider[] = [
         ResetPasswordDialogComponent,
         ForgotUsernameDialogComponent,
         ForgotPasswordDialogComponent,
+        ReplayHasValuePipe,
+        GroupElementComponent,
+        CountUniqueGroupMembersPipe,
+        GridComponent,
+        ViewerDialogComponent,
     ],
     imports: [
         CommonModule,

src/app/components/elements/grid/grid.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/app/components/elements/grid/grid.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: repeat(var(--items-per-row, 4), 1fr);
+  gap: var(--gap-size, 8px);
+}

src/app/components/elements/grid/grid.component.ts

@@ -0,0 +1,20 @@
+import { Component, HostBinding, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-grid',
+  templateUrl: './grid.component.html',
+  styleUrls: ['./grid.component.scss'],
+})
+export class GridComponent {
+  @Input('itemsPerRow') itemsPerRow = 4;
+
+  @Input('gapSizePx') gapSizePx = 8;
+
+  @HostBinding('style.--items-per-row') get itemsPerRowStyle() {
+    return this.itemsPerRow;
+  }
+
+  @HostBinding('style.--gap-size') get gapSizeStyle() {
+    return this.gapSizePx + 'px';
+  }
+}

src/app/components/elements/group-element/count-unique-group-members.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { IGroup } from '~common/interfaces';
+
+@Pipe({
+  name: 'countUniqueGroupMembers',
+})
+export class CountUniqueGroupMembersPipe implements PipeTransform {
+  transform({ members, owners }: IGroup): unknown {
+    const uniqueIds = new Set([...members, ...owners].map(({ _id }) => _id));
+    return Array.from(uniqueIds).length;
+  }
+}

src/app/components/elements/group-element/group-element.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="group$ | async as group">
+  <p>
+    <span><b>{{group.name}}</b></span><br>
+    <small>by {{group.creator.fullname}}</small>
+  </p>
+
+  <button mat-flat-button color="primary" class="rounded" (click)="openMemberList(group)">
+    <mat-icon>groups</mat-icon>
+    <span>View members ({{ group | countUniqueGroupMembers }})</span>
+  </button>
+</ng-container>

src/app/components/elements/group-element/group-element.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 24px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  gap: 16px;
+  min-width: 240px;
+
+  * {
+    margin: 0;
+  }
+
+  button {
+    align-self: flex-start;
+  }
+}

src/app/components/elements/group-element/group-element.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { IGroup } from '~common/interfaces';
+import { combineLatest, map, ReplaySubject } from 'rxjs';
+import { AccountService } from '~services';
+import { GroupMemberDialogComponent } from '~dialogs';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-group-element',
+  templateUrl: './group-element.component.html',
+  styleUrls: ['./group-element.component.scss'],
+})
+export class GroupElementComponent {
+  @Input('group') set group(group: IGroup) {
+    this.group$.next(group);
+  }
+
+  public group$ = new ReplaySubject<IGroup>(1);
+  public isUserOwner$ = combineLatest([this.group$, this.account.user$]).pipe(
+    map(([group, user]) => group?.creator._id === user._id),
+  );
+
+  public openMemberList(group: IGroup) {
+    this.dialog.open(GroupMemberDialogComponent, { data: group });
+  }
+
+  constructor(private account: AccountService, private dialog: MatDialog) {}
+}

src/app/components/grid-element/grid-element.component.ts

@@ -1,18 +1,17 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatMenu } from '@angular/material/menu';
-import { MatDialog } from '@angular/material/dialog';
 
 import {
+  ICompilation,
+  IEntity,
   isAnnotation,
   isCompilation,
   isEntity,
   isResolvedEntity,
-  ICompilation,
-  IEntity,
   ObjectId,
 } from 'src/common';
 import { environment } from 'src/environments/environment';
-import { ExploreEntityDialogComponent, ExploreCompilationDialogComponent } from 'src/app/dialogs';
+import { DialogHelperService } from '~services';
 
 @Component({
   selector: 'app-grid-element',
@@ -52,7 +51,7 @@ export class GridElementComponent {
   @Output()
   public updateSelectedObject = new EventEmitter<string>();
 
-  constructor(private dialog: MatDialog) {}
+  constructor(private dialogHelper: DialogHelperService) {}
 
   get tooltipContent() {
     let description = '';
@@ -125,23 +124,17 @@ export class GridElementComponent {
   public openExploreDialog(element: IEntity | ICompilation) {
     if (!element) return;
 
-    if (isCompilation(element)) {
-      // tslint:disable-next-line:no-non-null-assertion
-      const eId = (Object.values(element.entities)[0] as IEntity)._id;
-
-      this.dialog.open(ExploreCompilationDialogComponent, {
-        data: {
-          collectionId: element._id,
-          entityId: eId,
-        },
-        id: 'explore-compilation-dialog',
-      });
-    } else {
-      this.dialog.open(ExploreEntityDialogComponent, {
-        data: element._id,
-        id: 'explore-entity-dialog',
-      });
-    }
+    console.log(element);
+    const compilation = isCompilation(element) ? element._id.toString() : undefined;
+    const entity = compilation
+      ? Object.keys((element as ICompilation).entities)[0].toString()
+      : element._id.toString();
+
+    this.dialogHelper.openViewerDialog({
+      compilation,
+      entity,
+      mode: 'explore',
+    });
   }
 
   public selectObject(id: string | ObjectId) {

src/app/components/index.ts

@@ -15,3 +15,5 @@ export { SidenavListComponent } from './navigation/sidenav-list/sidenav-list.com
 export { NavbarComponent } from './navigation/navbar/navbar.component';
 export { FooterComponent } from './navigation/footer/footer.component';
 export { UploadComponent } from './upload/upload.component';
+export { GroupElementComponent } from './elements/group-element/group-element.component';
+export { GridComponent } from './elements/grid/grid.component';

src/app/dialogs/index.ts

@@ -2,12 +2,11 @@ export { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-
 export { EditEntityDialogComponent } from './edit-entity-dialog/edit-entity-dialog.component';
 export { EntityRightsDialogComponent } from './entity-rights-dialog/entity-rights-dialog.component';
 export { EntitySettingsDialogComponent } from './entity-settings-dialog/entity-settings-dialog.component';
-export { ExploreCompilationDialogComponent } from './explore-compilation-dialog/explore-compilation-dialog.component';
-export { ExploreEntityDialogComponent } from './explore-entity/explore-entity-dialog.component';
 export { GroupMemberDialogComponent } from './group-member-dialog/group-member-dialog.component';
 export { PasswordProtectedDialogComponent } from './password-protected-dialog/password-protected-dialog.component';
 export { RegisterDialogComponent } from './register-dialog/register-dialog.component';
 export { UploadApplicationDialogComponent } from './upload-application-dialog/upload-application-dialog.component';
 export { ResetPasswordDialogComponent } from './reset-password-dialog/reset-password-dialog.component';
 export { ForgotUsernameDialogComponent } from './forgot-username-dialog/forgot-username-dialog.component';
 export { ForgotPasswordDialogComponent } from './forgot-password-dialog/forgot-password-dialog.component';
+export { ViewerDialogComponent, ViewerDialogData } from './viewer-dialog/viewer-dialog.component'

src/app/dialogs/viewer-dialog/viewer-dialog.component.html

@@ -0,0 +1,4 @@
+<ng-container *ngIf="viewerUrl$ | async as viewerUrl">
+  <iframe [src]="viewerUrl | safe: 'resourceUrl'" allowfullscreen></iframe>
+</ng-container>
+

src/app/dialogs/viewer-dialog/viewer-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { environment } from '~environments';
+import { ReplaySubject } from 'rxjs';
+
+export type ViewerDialogData = {
+  entity?: string;
+  compilation?: string;
+  mode?: 'upload' | 'explore' | 'edit' | 'annotation' | 'open';
+};
+
+@Component({
+  selector: 'app-viewer-dialog',
+  templateUrl: './viewer-dialog.component.html',
+  styleUrls: ['./viewer-dialog.component.scss'],
+})
+export class ViewerDialogComponent {
+  public viewerUrl$ = new ReplaySubject<string>(0);
+
+  constructor(
+    public dialogRef: MatDialogRef<ViewerDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) private data: ViewerDialogData,
+  ) {
+    const url = new URL(environment.viewer_url);
+    for (const [key, value] of Object.entries(data)) {
+      if (!value) continue;
+      url.searchParams.set(key, value);
+    }
+    this.viewerUrl$.next(url.toString());
+  }
+}

src/app/pages/admin-page/admin-page.component.html

@@ -1,4 +1,4 @@
-<div class="content">
+<div class="content centered-content">
   <ng-container *ngIf="!(isAdmin$ | async); else adminBlock">
     <h1>User Administration</h1>
     <h2>Waiting for admin data</h2>